Javascript 如何在highcharts中设置yaxis值
我的json数据如下所示:Javascript 如何在highcharts中设置yaxis值,javascript,highcharts,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, 2
[
[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 ]
]
<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>
第一行是纪元时间中的日期,第二行是cpu利用率,第三行是内存利用率。我想创建时间序列图,日期在xaxis上,CPU和mmeory数据在yaxis上有不同的行。鉴于json外部文件提供的数据,我将如何实现这一点。我在javascript中看到了这样的例子,但这确实不现实。任何帮助都是非常感激的
我尝试了以下我想要分割cpu和内存的地方。我没有得到任何结果,空页。这是解决这个问题的方法还是在一张图表中绘制多个变量的其他方法?
我的javascript如下所示:
[
[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 ]
]
<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值?我的首选方法是以[x,y]对的形式发送序列的数据。因此,您的数据如下所示:
[
[1362027751000, 66], [1362027781000, 72], [1362027811000, 69], [1362027841000, 72], [1362027871000, 69], [1362027901000, 68], [1362027931000, 71], [1362027961000, 73], [1362027991000, 63], [1362028021000, 57 ]
]
以及:
您需要将其作为两个不同的series.data块发送。我生成初始json文件的程序没有给我该选项。我试图在javascript中通过cpu.push和内存push将其拆分。但是它还没有完全起作用,您也可以在页面上的javascript中实现这一点。
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
])
}
}