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轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- 改变highCharts的X轴和Y轴的数据刻度
xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...
- highcharts多个Y轴
http://blog.sina.com.cn/s/blog_6a53599101019qax.html 多个Y轴的实现方法在于把yAxis设置成一个数组,里面的一个对象代表一条Y轴,利用opposi ...
- HighCharts实现双Y轴
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
- [办公应用]如何制作二Y轴图（excel）
有时候我们会遇到一种图表,就是X轴一致,可是Y轴的数据相差很大.如下图中,年龄和收入就不是一个数量级,在图表中显示的时候,“年龄”的曲线根本看不到(表中数据仅供举例): 解决的方法就是使用双Y轴显示, ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- Echart实现多个y轴，坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...
随机推荐
- TensorFlow 基本概念
一.概述 使用图(graph)来表示计算任务 在会话(Session)的上下文(context)中执行图(graph) 使用tensor表示数据 通过 变量(Variable)维护状态 使用 feed ...
- Oracle 12C -- 基于sequence的列的默认值
12C支持先创建一个sequence,然后再将该sequence指定为某个列的值的默认表达式. 和"identity column"具有以下不同点: ·对列的个数没有限制 ·seq ...
- java 和 C++ Socket通信（java作为服务端server，C++作为客户端client，解决中文乱码问题GBK和UTF8）
原文链接: http://www.cnblogs.com/kenkofox/archive/2010/04/25/1719649.html 代码: http://files.cnblogs.com/k ...
- 【蓝桥杯】PREV-21 回文数字
题目链接:http://lx.lanqiao.org/problem.page? gpid=T113 历届试题 回文数字 时间限制:1.0s 内存限制:256.0MB 问题描写叙 ...
- 使用mysqldump导入导出MySQL数据库
数据库的基本导入\导出的命令 是 mysqldump 和 source 在linux下直接用命令行操作就可以 在windows下 一般情况下有两种方法一个也是用命令行 另一个是用phpmyadmin ...
- Java 8 flatMap example
Java 8 flatMap example In Java 8, Stream can hold different data types, for examples: Stream<Stri ...
- django admin 导出数据简单示例
借鉴博客:https://www.lijinlong.cc/django/djxs/2101.html 具体代码实现: class TipReport(admin.ModelAdmin): actio ...
- NSString和NSMutablestring，copy和strong（转载）
1.http://www.cocoachina.com/ios/20150512/11805.html 2.http://blog.csdn.net/winzlee/article/details/5 ...
- Spring MVC+Hibernate JPA搭建的博客系统项目中所遇到的坑
标签: springmvc hibernate 2016年12月21日 21:48:035133人阅读 评论(0) 收藏 举报 分类: Spring/Spring MVC(6) Hibernate ...
- Unity获取插件所在目录的巧妙方法
编写插件时,Unity没有提供当前被放置目录的功能.比如资源商店的一些插件需要放在Assets根目录下. 但通过脚本可以反求出所在目录,对于自己写的插件,就避免了类似问题: var scriptObj ...