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数据的实现方法
动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt
-
通过php动态传数据到highcharts
1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在本地演示一下请求的动态数据. 2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar,浏览器打开localhost,文件存放在wamp/www目录下 3:php代码,没有写与数据库实时请求的过程. <?php $b = array( array('name'=>'
-
Highcharts使用简例及异步动态读取数据
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch
-
Highcharts学习之数据列
什么是数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组 如果有categories属性的话就是使用一维数组 data : [1, 4, 6,
-
Highcharts＋NodeJS搭建数据可视化平台示例
前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne
-
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 ol
-
d3.js实现自定义多y轴折线图的示例代码
前言 需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础 这张图只用了d3.js的一些最基本用法,数据量也比较小,所以也用不到多么牛逼的用法,只涉及到了比例尺 scale ,轴 axis ,画线和点,最后我添加了一个缩放效果. 效果 在线预览 具体实现 1.初始化一个svg作为容器,之后所有的点线面都是在这个容器里边画了 svg.select('#id') .append('
-
实现ECharts双Y轴左右刻度线一致的例子
不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value', name : '人数', //splitLine:{show:false}, axisLabel : { formatter: '{value} 个', textStyle:{color: '#A23400'}//#A23400 purple }, axisLine:{ lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜色 #A23400
-
Vue.js+HighCharts实现动态请求展示时序数据
本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template> <el-container> <el-header> <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha
-
python实现从文件中读取数据并绘制成 x y 轴图形的方法
如下所示: import matplotlib.pyplot as plt import numpy as np def readfile(filename): dataList = [] dataNum = 0 with open(filename,'r') as f: for line in f.readlines(): linestr = line.strip('\n') if len(linestr) < 8 and len(linestr) >1: dataList.append(f
-
R语言数据可视化ggplot添加左右y轴绘制天猫双十一销售图
目录 构造数据集 绘制散点 修改两坐标轴信息 本文是以天猫双十一销量与增长率为例,原始的数据可以参考上一篇文章:用 ggplot 重绘天猫双十一销售额图,这里不再作过多的介绍. 同时整个的天猫双十一的销售额数据分析可以关注:天猫双十一"数据造假"是真的吗? 老规矩,先上最终成果(两张图只是颜色的差别): 上图左边 y 轴表示增长率的刻度,右边 y 轴表示销售额的数据,我们将两者在同一张图上进行展现.其实将两个统计图在同一个坐标系中呈现不算是这个绘图的难点,其真正的难点在与刻度的变换以及
-
Echarts图表点击x轴y轴切换图表二级数据实例代码
目录 效果图 代码部分 总结 效果图 代码部分 methods: { mychart1(data) { this.myChart = echarts.init(document.getElementById('profitTotal')); let echartData = []; if(data) { echartData = data; } else { echartData = []; } let xAxisData = echartData.map(v => v.name); let y
-
ECharts实现数据超出Y轴最大值max但不隐藏
目录 需求 先翻翻文档 yAxis series.Line 解决方案 完整代码 需求 Y轴必须有最大值,我的折线图的数据可能会超过这个最大值,但是!我需要让他的刻度显示在最大值的位置但是提示框显示的是原来的值. 如下图: 先翻翻文档 yAxis 好家伙,不看不知道一看吓一跳,光 Y 轴的 第一层配置就三十几项.不过好在现在我们不需要关注其他的,找找与数值范围限制的相关属性吧: min:设置 y 轴刻度最小值,默认是 小于等于所有数据最小值 的值,具体根据刻度单位进行计算:手动设置后,小于该值的部
-
解决echarts图表y轴数据间隔过大的问题
目录 echarts图表y轴数据间隔过大的问题 echarts图表Y轴最小间隔值 改为1 总结 echarts图表y轴数据间隔过大的问题 1.如图所示,echarts图表y轴数据间隔过大,前面几个显示正常,最后一个值变得很大,造成页面特别难看 2.解决办法: 在yAxis中axisLabel设置如下,可以根据自己的需求截取几位小数点 yAxis: { type: "value", axisLabel: { formatter:function (value, index) { retu
-
FusionCharts图表显示双Y轴双(多)曲线
项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线, 找了一下,用MSCombiDY2D.swf可以实现,生成图如下: 两个图表的数据是一样的,设置有一此不同而己 对应的XML文本如下: 复制代码 代码如下: <chart palette='2' caption='图表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecisi