highcharts在x轴上显示小时分钟

时间:2012-02-20 09:02:33

标签: javascript highcharts

请帮帮我,我需要使用高图显示3小时图表。

请看截图

非常感谢你enter image description here

1 个答案:

答案 0 :(得分:1)

您只需使用数据扩展以下代码

即可

<强> HTML

<div id="container" style="height: 400px"></div>

<强> JS

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    defaultSeriesType: 'line',
    marginRight: 130,
    marginBottom: 25
},
title: {
    text: 'Highcharts',
    x: -20 //center
},
subtitle: {
    text: ' ',
    x: -20
},
xAxis: {
    categories: ['1', '2', '3', '4', '5', '6',
                    '7', '8', '9', '10', '11', '12']
},
yAxis: {
    title: {
        text: ' '
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'}]
},
tooltip: {
    formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
    borderWidth: 0
},
series: [    
{
    name: 'Time',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]
});

这是jsfiddle文件http://jsfiddle.net/CA2cT/9/