[英]Highcharts multiple y axis and dynamic update
I'm trying to do this type of chart, I modified and combined both examples. 我试图做这种类型的图表,我修改并合并了两个示例。 Here is the result in jsfiddle: http://jsfiddle.net/cp0ux9qp/4/
这是jsfiddle中的结果: http : //jsfiddle.net/cp0ux9qp/4/
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
zoomType: 'xy',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var serie1 = this.series[0];
var serie2 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.floor((Math.random() * 10) + 5),
z = Math.floor((Math.random() * 20) + 15);
serie1.addPoint([x, y], true, true);
serie2.addPoint([x, z], true, true);
}, 1000);
}
}
},
title: {
text: 'Oxygen and Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}mg/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Oxygen',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Oxygen',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 10) + 5)
});
}
return data;
}())
},
{
name: 'Temperature',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 20) + 15)
});
}
return data;
}()),
yAxis:1
}
]
});
});
});
It doesn't show secondary Y axi, Why? 它没有显示次要Y轴,为什么? Another problem occurs when data are the same for a range of time, for example: oxygen: 6.74 temperature: 16.7 The X axis scale is modified and graph just show one line.
当一段时间内数据相同时,会发生另一个问题,例如:氧气:6.74温度:16.7 X轴刻度被修改,图形仅显示一条线。
The issue with the hidden secondary axis is because with your min-width declaration in the container style property + your chart.marginRight: 20
you draw the axis off div. 辅助轴隐藏的问题是因为容器样式属性中的最小宽度声明+
chart.marginRight: 20
将该轴从div上绘制了出来。 If you comment out your margin you see the secondary axis. 如果注释掉边距,则会看到辅助轴。
As for when you have the same scaled temp/oxygen content - how should it behave? 至于当您按比例缩放温度/氧气含量时,它应如何表现?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.