3

I am making a column range chart with some time range. Basically want to plot different time taken by different processes as they progress one after other. Here is the fiddle as an example.

$(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/

In this example, I am not able to get the tool top as "process X started at x time and ended as y time".

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

When I am taking value as this.Y, I am getting only the start time.

Any help in this regard will be highly appreciated.

4

2 回答 2

5

使用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/

于 2013-09-18T17:44:09.770 回答
1

这将模拟默认的 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/>';
  }
}
于 2016-02-12T18:55:14.920 回答