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 ...
随机推荐
- TextSharp详情
TextSharp是一个生成Pdf文件的开源项目,最近在项目中有使用到这个项目,对使用中的经验作一个小结. ITextSharp中相关的概念: 一.Document 这个对象有三个构造函数: 隐藏行号 ...
- 【SqlServer】SQL Server的常用函数
字符串函数 SubString():用于截取指定字符串的方法.该方法有三个参数:参数1:用于指定要操作的字符串.参数2:用于指定要截取的字符串的起始位置,起始值为 1 .参数3:用于指定要截取的长度. ...
- 关于tensorboard启动问题
我在学习过程中遇到了tensorboard无法启动的问题. 按照网上的教程,我无法正常启动tensorboard,全过程没有报错,但是打开tensorboard显示 No dashboards are ...
- win7下 go语言开发环境搭建（64bit）
Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程 ...
- Oracle 12C -- temporal validity
temporal validity需要在创建表的时候使用一个vaild-time维度(包含时间起始和结束) 创建有valid-time维度的表 (1)显式指定两个date-time列 SQL> ...
- MYSQL内存评估
### MySQL Memory Calculator Procedure ### http://kedar.nitty-witty.com/blog/calculte-mysql-memory-us ...
- 基于 Transaction 类的分布式显式事务
自.NET2.0以来增加了System.Transactions命名空间,为.NET应用程序带来了一个新的事务编程模型. 这个命名空间提供了几个依赖的TransactionXXX类.Transacti ...
- C#基础第四天-作业答案-Hashtable-list<KeyValuePair>泛型实现名片
.Hashtable 实现 Hashtable table = new Hashtable(); while (true) { Console.WriteLine("------------ ...
- MySql（十四）：MySql架构设计——可扩展性设计之数据切分
一.前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我们还是会面临到扩展瓶颈.这时候,我 ...
- Java数据结构和算法（六）：前缀、中缀、后缀表达式
前面我们介绍了三种数据结构,第一种数组主要用作数据存储,但是后面的两种栈和队列我们说主要作为程序功能实现的辅助工具,其中在介绍栈时我们知道栈可以用来做单词逆序,匹配关键字符等等,那它还有别的什么功能吗 ...