Question

对于我的项目，我需要使用百分比区域（Highcharts js）来按天显示数据，但我没有设法改变Highcharts给出的示例。

基本上，我希望这个（http://www.highcharts.com/demo/area-stacked-percent）在x轴上有24小时的范围。

有人会有一个例子吗？

Answer 1

请看下面总结的jsFiddle

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type:'area'
        },
        xAxis: {
            type: 'datetime'
        },

        plotOptions: {
            series: {
                pointStart: Date.UTC(2010, 0, 1),
                pointInterval: 24 * 3600 * 1000 // one day
            },

                area: {
                    stacking: 'percent',
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,     95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5,     106.4, 129.2]
        }]
    });
});

编辑：我想更具体的日子，如图所示构建您的系列数据here

data: [{x:Date.UTC(2010, 0, 1),y:29.9},  {x:Date.UTC(2010, 0, 2),y:71.5},    
       {x:Date.UTC(2010, 0, 3),y:106.4}, {x:Date.UTC(2010, 0, 4),y:129.2}, 
       {x:Date.UTC(2010, 0,5),y:144.0},  {x:Date.UTC(2010, 0, 6),y:176.0}, 
       {x:Date.UTC(2010, 0, 7),y:135.6}, {x:Date.UTC(2010, 0, 8),y:148.5}, 
       {x:Date.UTC(2010, 0, 9),y:216.4}, {x:Date.UTC(2010, 0, 10),y:194.1}, 
       {x:Date.UTC(2010, 0, 11),y:95.6}, {x:Date.UTC(2010, 0, 12),y:54.4}
]

要注意两个系列中每天都有数据（甚至是0），否则你会让渲染器疯狂......

Highcharts如何随时间使用百分比区域

1 个答案: