整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们将为大家介绍 Highcharts 的动态图。
我们在前面已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。
每秒更新曲线图
chart.events
chart.event 属性中添加 load 方法（图表加载事件）。在 1000 毫秒内随机产生数据点并生成图表。
chart: {
events: {
load: function () {
// 图表每秒更新一次
var series=this.series[0];
setInterval(function () {
var x=(new Date()).getTime(), // 当期时间
y=Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}}实例
文件名：highcharts_dynamic_spline.htm
<html><head><meta charset="UTF-8" /><title>Highcharts 教程 | 菜鸟教程(runoob.com)</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div><script language="JavaScript">$(document).ready(function() {
var chart={
type: 'spline', animation: Highcharts.svg, // don't animate in IE < IE 10.
marginRight: 10, events: {
load: function () {
// set up the updating of the chart each second
var series=this.series[0];
setInterval(function () {
var x=(new Date()).getTime(), // current time
y=Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
};
var title={
text: 'Live random data'
};
var xAxis={
type: 'datetime',
tickPixelInterval: 150
};
var yAxis={
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var 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);
}
};
var plotOptions={
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
};
var legend={
enabled: false
};
var exporting={
enabled: false
};
var 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 +=1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}];
var json={};
json.chart=chart;
json.title=title;
json.tooltip=tooltip;
json.xAxis=xAxis;
json.yAxis=yAxis;
json.legend=legend;
json.exporting=exporting;
json.series=series;
json.plotOptions=plotOptions;
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts(json);
});</script></body></html>Highcharts 饼图
通过点击添加数据
chart.events
在 chart.event 属性中添加 click 方法（整个图表的绘图区上所发生的点击事件）。该方法在图表绘图区上发生点击时会添加新的数据点。
chart: {
events: {
click: function (e) {
// 获取点击坐标和数据项
var x=e.xAxis[0].value,
y=e.yAxis[0].value,
series=this.series[0];
// 添加点击的坐标
series.addPoint([x, y]);
}
}}实例
文件名：highcharts_dynamic_click.htm
mysql数据库结构：
资源地址：han-link.cn/4165.html#妙笔生花创作挑战#
挑战30天在头条写日记#
Apache ECharts 支持多种下载方式，可以在下一篇教程安装中查看所有方式。这里，我们以从 jsDelivr CDN 上获取为例，介绍如何快速安装。
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option={
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>这样你的第一个图表就诞生了！
https://github.com/apache/echarts
*请认真填写需求信息，我们会在24小时内与您取得联系。
