分享编程~
 
Highcharts图表ajax动态获取数据实时更新数据y,x实时更新

js图表之Highcharts通过ajax动态获取数据实时更新图表数据,实时更新Y,X轴数据,支持多条走势图

Highcharts图表插件是非常好用的,不看文档还是不知道怎么用,即使看文档也一时半会的写不出来,这里封装一个通用版的Highcharts图表用法,里边都是中文注释,手动设置即可。

Highcharts动态图表重要的一点就是events下的load属性,如下代码:

chart: {
  plotBackgroundColor: null,
  plotBorderWidth: null,
  plotShadow: false,
  type: 'spline', // 图表类型 默认:spline(走势),line(折线),column(柱状图),pie(饼图)
  events: {
	load: function () {
	  var series1 = this.series[0],series2 = this.series[1],chart = this;
	  setInterval(function () {
	  $.post(ajaxUrl,
	  {},
	  function(postData){
	  //console.log(postData[0]);
	  //[{"x":"17:29:31","y":"1"},{"x":"17:29:31","y":"8"}]
		// 第一条线
		var x = postData[0].x;
		var y = postData[0].y;
		y = Number(y);
		series1.addPoint([x, y], true, true);
		// 第二条线
		var x = postData[1].x;
		var y = postData[1].y;
		y = Number(y);
		series2.addPoint([x, y], true, true);
		// 动态x轴数据
		tempDataX.push(x);
		chart.xAxis[0].setCategories(tempDataX);
	  },'json');
			
	  }, 1000);
	}
  }
},

demo.html源码:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		
	</style>
	<!--
	<script src="./js/6.1/highcharts.js"></script>
	<script src="./js/6.1/exporting.js"></script>
	<script src="./js/6.1/highcharts-zh_CN.js"></script>
	-->
	<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="container" style="width:600px;height:600px"></div>
<script>

/* 
  1、注意:x轴同时显示个数 == 初始Y轴数据条数
  2、初始x轴数据和ajax返回的x数据格式需要一致
*/

/*** 初始配置 STRAT ***/
	//大标题
	var titleBig = '水果实时销售数据';
	//小标题
	var titleMin = ''; 
	// Y轴值说明/单位
	var tempYvalue = '订 单 量 /笔';
	// 打印导出组件是否展示
	var printExport = true;
	// highcharts logo版权信息是否展示
	var copyrightFlag = true;
	// 初始x轴数据
	var tempDataX = ['15:50:01','15:50:02','15:50:03','15:50:04','15:50:05','15:50:06','15:50:07','15:50:08','15:50:09','15:50:10',];
	// 初始Y轴数据-第一条线
	var tempDateY1 = [{y:4},{y:6},{y:8.1},{y:9},{y:6},{y:5},{y:4},{y:3},{y:6},{y:9},];
	// 初始Y轴数据-第二条线
	var tempDateY2 = [{y:6},{y:5},{y:7},{y:10},{y:5},{y:8},{y:8},{y:4},{y:5},{y:3},];
	// 第一条走势线名称
	var tempYtitle1 = '橘子';
	// 第二条走势线名称
	var tempYtitle2 = '苹果';
	// ajax url
	var ajaxUrl = 'test.php';
	
/*** 初始配置 END ***/
	
/*** Highcharts 组件 ***/
	Highcharts.chart('container', {
		title: {
			text: titleBig // 大标题
		},
		subtitle: {
				text: titleMin // 小标题/注释等
		},
		// 图表基础配置
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			type: 'spline', // 图表类型 默认:spline(走势),line(折线),column(柱状图),pie(饼图)
			events: {
				load: function () {
					var series1 = this.series[0],series2 = this.series[1],chart = this;
					setInterval(function () {
					$.post(ajaxUrl,
					{},
					function(postData){
					//console.log(postData[0]);
					//[{"x":"17:29:31","y":"1"},{"x":"17:29:31","y":"8"}]
						// 第一条线
						var x = postData[0].x;
						var y = postData[0].y;
						y = Number(y);
						series1.addPoint([x, y], true, true);
						// 第二条线
						var x = postData[1].x;
						var y = postData[1].y;
						y = Number(y);
						series2.addPoint([x, y], true, true);
						// 动态x轴数据
						tempDataX.push(x);
						chart.xAxis[0].setCategories(tempDataX);
					},'json');
							
					}, 1000);
				}
			}
		},
		// 版权信息是否显示
		credits:{
			enabled:true
		},
		// 打印导出配置
		exporting:{
			enabled:true
		},
		// 图例参数
		legend: { 
			//floating:true, 
			backgroundColor: '#FFFFFF',
			align: 'left',
			verticalAlign: 'top',
			x: 100,
			y: 50,
			//labelFormat: '<span style="{color}">{name} (click to hide or show)</span>'
		},
		// 数据颜色分布(默认样式这里可以重定义)
		colors: ['#7CB5EC','#ED561B','#FF9655',  '#DDDF00','#50B432', 
		'#F564ED','#03F2E3','#17A0FA',  '#7648FF',  '#AAAAAA'],
		//数据提示框(默认样式这里可以重定义)
		tooltip: { 
			//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		// 图标类型参数
		plotOptions: {
			pie: {
				allowPointSelect: true,
				//cursor: 'pointer',
				dataLabels: {
					enabled: true   // 数据标题
				},
				showInLegend: true, // 图例展示开关
			},
			series: {
				marker: {
					enabled: false, /*数据点是否显示*/
				},
			}
		},

		//x轴
		xAxis: {
			categories: tempDataX, //x轴标签名称
			gridLineWidth: 0, //设置网格宽度为1
			lineWidth: 1,  //基线宽度
			labels:{y:26}  //x轴标签位置:距X轴下方26像素
		},
		yAxis: {
			title: {
				text: tempYvalue,
			}
		},
		// y轴 数据列
		series: [
			{
				name: tempYtitle1,
				data: tempDateY1
			},
			{
				name: tempYtitle2,
				data: tempDateY2
			}
			
		],
	});
</script>
</body>
</html>

注意:x轴同时显示个数 == 初始Y轴数据条数,初始x轴数据和ajax返回的x数据格式需要一致。

后端服务代码每次返回的数据格式为json数组:

[{"x":"17:41:09","y":5},{"x":"17:41:09","y":8}]

后端服务器代码以php为例(当前时间随机返回数值):

<?php 
header('Access-Control-Allow-Origin:*');  
header('Content-Type: text/html; charset=UTF-8');
$x = date('H:i:s');
$y1 = rand(1,9);
$d1 = array('x'=>$x,'y'=>$y1);
$y2 = rand(1,9);
$d2 = array('x'=>$x,'y'=>$y2);
$data = array($d1,$d2);
echo json_encode($data,true);
//或者直接拼接json字符串
//echo '[{"x":"'.$x.'","y":"'.$y1.'"},{"x":"'.$x.'","y":"'.$y2.'"}]';


上一篇:纯css设置table表格样式简单方法下一篇:GitLab:The project you were looking for could not be found.找不到目录
赞(1) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/124.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!