Highcharts 多个Y轴动态刷新数据的实现代码
效果图：
js代码：
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg,
// don't animate in old IE
marginRight: 10,
events: {
load: function() {}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
{
title: {
text: 'Name'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() { // generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},
{
name: 'Random data',
data: (function() { // generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
}); // set up the updating of the chart each second
var series = chart.series[0];
var series1 = chart.series[1];
setInterval(function() {
var x = (new Date()).getTime(),
// current time
y = Math.random();
series.addPoint([x, y + 1], true, true);
series1.addPoint([x, y - 1], true, true);
},
1000);
});
});
html代码：
<head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/exporting.js"></script> <script> //左侧Javascript代码 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body>
以上这篇Highcharts 多个Y轴动态刷新数据的实现代码 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
Highcharts 组合图 以下实例演示了多Y轴的组合。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 yAxis 配置 在 yAxis 属性中添加多条Y轴的值 。 var yAxis = [{ // 第一条Y轴 }, { // 第二条Y轴 },{ // 第三题Y轴 } }] 实例 文件名：hig
-
本文向大家介绍动态更新highcharts数据的实现方法，包括了动态更新highcharts数据的实现方法的使用技巧和注意事项，需要的朋友参考一下 动态更新highcharts数据的实现方法 以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
Highcharts 区域图 以下实例演示了反转x轴与y轴区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中添加 inverted 属性。 chart 配置 将 chart 的 inverted 属性设置为 true，X轴为垂直，Y轴为水平的。 var chart = { type: 'area', invert
-
本文向大家介绍JS highcharts实现动态曲线代码示例，包括了JS highcharts实现动态曲线代码示例的使用技巧和注意事项，需要的朋友参考一下 Highcharts是一个制作图表的纯Javascript类库， 主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线
-
本文向大家介绍php+ajax实现无刷新动态加载数据技术，包括了php+ajax实现无刷新动态加载数据技术的使用技巧和注意事项，需要的朋友参考一下 我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术，必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 滚屏加载技术，就是使用Javasc
-
问题内容： 我知道熊猫支持次要Y轴，但我很好奇是否有人知道将三次Y轴放置在地块上的方法。目前，我正在用numpy + pyplot来实现这一点，但是对于大数据集来说它的速度很慢。 这是为了在同一张图上绘制具有不同单位的不同测量值，以便于比较（例如，相对湿度/温度/和电导率） 所以真的很好奇是否有人在没有太多工作的情况下就能做到这一点。 [编辑]我怀疑是否有办法做到这一点（没有太多的开销），但是我希