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 ...
随机推荐
- Docker(一):Docker入门教程
如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如 ...
- lamp虚拟主机的常用配制选项
<VirtualHost *:80> ServerAdmin m.koobird.com DocumentRoot "/var/www/html/xinyou&quo ...
- 【java】详解集合
目录结构: contents structure [-] 集合概述 什么是集合 Collection和Map的区别 List和Set的区别 ArrayList和LinkedList的区别 HashSe ...
- python ---Pandas时间序列：生成指定范围的日期
引入包 import pandas as pd import numpy as np 1.生成指定范围的日期 print pd.date_range('11/1/2018','11/9/2018') ...
- 由苹果的低级Bug想到的
2014年2月22日,在这个“这么二”的日子里,苹果公司推送了 iOS 7.0.6(版本号11B651)修复了 SSL 连接验证的一个 bug.官方网页在这里:http://support.apple ...
- 【转载并整理】filter、servlet、interceptor、listener区别
参考文章:https://blog.csdn.net/u013087513/article/details/56835894 一.servlet servlet是一种运行服务器端的java应用程序,具 ...
- Java 8 Streams filter examples
1. Streams filter() and collect() package com.mkyong.java8; import java.util.Arrays;import java.util ...
- 在ubuntu16安装supervisor 并 启动 .net core.
1. 安装supervisor apt-get install supervisor 2.新建supervisor配置文件.使用以下命令在linux 命令行 echo_supervisord_conf ...
- php分享十五：php的命令行操作
一:像命令行传参数方法: 1: 使用$argc $argv 用法: /usr/local/php/bin/php ./getopt.php 123 456 2:使用getopt函数() http:/ ...
- MySql（十六）：MySql架构设计——MySQL Cluster
前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等高级功能.和 Oracle Real Cl ...