如何在highcharts中设置y轴值

时间:2013-06-07 16:27:34

标签: javascript highcharts

我的json数据如下所示:

[
 [1362027751000, 1362027781000, 1362027811000, 1362027841000, 1362027871000, 1362027901000, 1362027931000, 1362027961000, 1362027991000, 1362028021000 ],
[ 66, 72, 69, 72, 69, 68, 71, 73, 63, 57 ],
[ 50, 5, 67, 72, 34, 100, 10, 100, 23, 56 ] 

]

第一行是纪元时间的日期,第二行是cpu利用率,第三行是内存利用率。我想创建时间序列图表,日期在xaxis上,而yaxis上的CPU和mmeory数据用不同的行。考虑到json外部文件提供的数据,我将如何实现这一目标。我看到javascript中的示例,但这实际上不是现实主义。任何帮助都很受欢迎。

我尝试了下面我要拆分cpu和内存的地方。我没有得到任何结果,空白页面。这是解决这个问题的方法还是有其他方法可以在一个图表中绘制多个变量? 我的javascript看起来像这样:

<script type="text/javascript">

        $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'area'
                    },
                    xAxis: {
                        type: 'datetime'

                    },
                //series: [{}]
                series: [{{
                type: 'spline',
                name: 'CPU',
                data: cpu
            }, {
                type: 'spline',
                name: 'memory',
                data: memory
            }}]

                };

            $.getJSON('data.json', function(data) {
                options.series[0].data = data;
                var cpu = [];
                var memory=[];

                for(i=0; i< data.length, i++) {
                    for(j=0; j<data[i].length; j++){
                    alert(data[i].length);
                        cpu.push([
                            data[i][j], // the date
                            data[1][j] // the cpu

                        ]);
                        memory.push([
                            data[i][j], // the date
                            data[2][j] // the volume
                        ])
                    }
                }

                var chart = new Highcharts.Chart(options);
                //alert(JSON.stringify(data, null, 4));



            });

        });
     </script>  

图表看起来不正确。看起来xaxis和yaxix都报告了日期值。有没有办法设置yaxis值?

2 个答案:

答案 0 :(得分:0)

我的偏好是将一系列数据作为[x,y]对发送。所以你的数据看起来像是:

[
[1362027751000, 66], [1362027781000, 72], [1362027811000, 69], [1362027841000, 72], [1362027871000, 69], [1362027901000, 68], [1362027931000, 71], [1362027961000, 73], [1362027991000, 63], [1362028021000, 57 ]
]

[
[1362027751000, 50], [1362027781000, 5], [1362027811000, 67], [1362027841000, 72], [1362027871000, 34], [1362027901000, 100], [1362027931000, 10], [1362027961000, 100], [1362027991000, 23], [1362028021000, 23]
]

您需要将其作为2个不同的series.data块发送。

答案 1 :(得分:0)

   for(i=0; i< data.length-2; i++) {
          for(j=0; j<data[i].length; j++){

               cpu.push([
    data[i][j], // the date
    data[1][j] // the cpu

     ]);
     memory.push([
    data[i][j], // the date
    data[2][j] // the volume
     ])
}
  }