Хобрук: Ваш путь к мастерству в программировании

Верхняя диаграмма - Диаграмма диапазона столбцов с временным диапазоном. Как получить всплывающую подсказку в качестве времени начала и окончания

Я делаю диаграмму диапазона столбцов с некоторым временным диапазоном. В основном нужно отображать разное время, затрачиваемое разными процессами по мере их продвижения один за другим. Вот скрипка в качестве примера.

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Temperature variation by month'
        },

        subtitle: {
            text: 'Observed in Vik i Sogn, Norway, 2009'
        },

        xAxis: {
            categories: ['02/07/2013', '03/07/2013', '04/07/2013']
        },

        yAxis: {
            type: 'datetime',
            title: {
                text: 'Temperature ( °C )'
            }
        },

            tooltip: {
            valueSuffix: '°C'
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + '°C';
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 4, 0, 0)],
                [Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 5, 0, 0)],
                [Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 6, 0, 0)]
            ]
        }]

    });

});

http://jsfiddle.net/XBmB5/2/

В этом примере я не могу получить верхнюю часть инструмента, поскольку «процесс X начался в момент времени x и закончился в момент времени y».

tooltip: {
    formatter: function() {
        return '<b>' + this.x + '</b> started at <b>' + Highcharts.dateFormat('%H:%M', this.y[0]);
    }

Когда я принимаю значение как this.Y, я получаю только время начала.

Любая помощь в этом отношении будет высоко оценена.

highcharts
18.09.2013

Ответы:


1

используйте значения point.low и point.high

  tooltip: {
        formatter: function () {
            console.log(this);
            return '<b>' + this.x + '</b> started at <b>' + Highcharts.dateFormat('%H:%M', this.point.low) + '</b> and ended at <b>' + Highcharts.dateFormat('%H:%M', this.point.high) + '</b>';
        }
    },

http://jsfiddle.net/JnGVh/

18.09.2013

2

Это будет эмулировать стиль Highcharts по умолчанию, но с правильно отформатированным временем.

tooltip: {
  formatter: function () {
    var low = Highcharts.dateFormat('%H:%M', this.point.low);
    var high = Highcharts.dateFormat('%H:%M', this.point.high);
    return '<span style="font-size: 10px">' + this.point.key + '</span><br/><span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + ' - ' + high + '</b><br/>';
  }
}
12.02.2016
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..