Question

我使用3个数据点设置我的柱形图。每个x值都是日期时间值 - 一天内的不同小时。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2013, 5, 1, 0, 0, 0), 1], 
                [Date.UTC(2013, 5, 1, 2, 0, 0), 1], 
                [Date.UTC(2013, 5, 1, 4, 0, 0), 1]
            ]
        }]
    });
});

这是我的例子：http://jsfiddle.net/CqkUc/1/

我的问题是每个列工具提示显示相同的日期，我希望它们显示不同的小时。我知道我可以使用工具提示格式化程序功能，但我认为可能有办法强制xAxis单位为一小时。

Answer 1

您可以为dateTime轴和工具提示的每个级别设置格式。默认情况下，轴格式与工具提示格式不同。有关默认值，请参阅http://api.highcharts.com/highcharts#tooltip和http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats。它似乎是在工具提示中使用日期格式的那些数据点，虽然我不知道为什么。对于第一个具有时间元素的全部0而不是其他元素的第一个是有意义的。

http://jsfiddle.net/bhlaird/CqkUc/2/

  $('#container').highcharts({
        chart: {
            type: 'column'
        },
        tooltip: {
            dateTimeLabelFormats : {
                day: '%H:%M',
            }
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H:%M'
            }
        },
        series: [{
            data: [
                [Date.UTC(2013, 5, 1, 0, 0, 0), 1],
                [Date.UTC(2013, 5, 1, 2, 0, 0), 1],
                [Date.UTC(2013, 5, 1, 4, 0, 0), 1]
            ]
        }]
    });

Answer 2

您可以使用tooltip formatter和dateFormat自定义显示的时间。

在Highcharts中设置日期时间测量单位

2 个答案: