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

Highcharts how to use a percentage area with time

本文关键字：百分比 区域 时间 何随 Highcharts      更新时间：2023-09-26

对于我的一个项目，我需要使用百分比区域（Highcharts js）来按天显示数据，但我无法转换Highcharts给出的示例。

基本上，我想要这个(http://www.highcharts.com/demo/area-stacked-percent)在x轴上具有24小时范围。

有人能举个例子吗？

看看下面总结的这个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]
        }]
    });
});

编辑：我想更具体地说几天，构建你的系列数据，如所示

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），否则会让渲染器抓狂。。。

相关文章：