Question

我正在制作一个具有一定时间范围的列范围图表。基本上想要绘制不同进程所采取的不同时间，因为它们一个接一个地进行。这是小提琴的一个例子。

$(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]);
    }

当我以此为价值时，我只得到了开始时间。

在这方面的任何帮助将受到高度赞赏。

Answer 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/

Answer 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/>';
  }
}

高图表 - 带有时间范围的列范围图表。如何将工具提示作为开始和结束时间

2 个答案: