Javascript Highcharts多y轴和动态更新

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]

我试图做这种类型的图表,我修改并合并了这两个例子。以下是JSFIDLE中的结果:

$(函数(){
$(文档).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
            }
            ]
        });
    });
});