Javascript Highcharts多y轴和动态更新
我试图做这种类型的图表,我修改并合并了这两个例子。以下是JSFIDLE中的结果:Javascript Highcharts多y轴和动态更新,javascript,dynamic,highcharts,Javascript,Dynamic,Highcharts,我试图做这种类型的图表,我修改并合并了这两个例子。以下是JSFIDLE中的结果: $(函数(){ $(文档).ready(函数(){ Highcharts.setOptions({ 全球:{ useUTC:false } }); $(“#容器”)。高图({ 图表:{ zoomType:'xy', 类型:“样条线”, 动画:Highcharts.svg,//不要在旧IE中设置动画 marginRight:10, 活动:{ 加载:函数(){ //设置图表的每秒更新 var serie1=本系列[0]
$(函数(){
$(文档).ready(函数(){
Highcharts.setOptions({
全球:{
useUTC:false
}
});
$(“#容器”)。高图({
图表:{
zoomType:'xy',
类型:“样条线”,
动画:Highcharts.svg,//不要在旧IE中设置动画
marginRight:10,
活动:{
加载:函数(){
//设置图表的每秒更新
var serie1=本系列[0];
var serie2=本系列[1];
setInterval(函数(){
var x=(新日期()).getTime(),//当前时间
y=数学楼层((数学随机()*10)+5),
z=数学楼层((数学随机()*20)+15);
serie1.addPoint([x,y],真,真);
serie2.addPoint([x,z],真,真);
}, 1000);
}
}
},
标题:{
文字:“氧气和温度”
},
xAxis:{
键入:“日期时间”,
像素间隔:150
},
yAxis:[{//主yAxis
标签:{
格式:“{value}mg/L”,
风格:{
颜色:Highcharts.getOptions().color[0]
}
},
标题:{
文字:“氧气”,
风格:{
颜色:Highcharts.getOptions().color[0]
}
}
},{//次雅克西
标题:{
文字:“温度”,
风格:{
颜色:Highcharts.getOptions().color[1]
}
},
标签:{
格式:“{value}C”,
风格:{
颜色:Highcharts.getOptions().color[1]
}
},
相反:对
}],
工具提示:{
分享:真的
},
图例:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
名称:“氧气”,
数据:(函数(){
//生成一个随机数据数组
var数据=[],
时间=(新日期()).getTime(),
我
对于(i=-19;i隐藏次轴的问题是因为容器样式属性中的最小宽度声明+您的chart.marginRight:20
将轴从div中画出。如果注释掉边距,您将看到次轴
至于当你有相同的标度温度/氧气含量时,它应该如何表现?谢谢,现在可以了。我修改了JSFIDLE示例以获得所需的表现(我将最小值和最大值都放在Y轴上)。
$(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
}
]
});
});
});