啦啦啦, 我又出来活跃啦, 来到新公司的第一篇简书, 我打算写写我最近自学的 highcharts, 跟大家一起分享分享.
现在很多网站上都有图表类的展示, highcharts 作为做图表的半壁江山 (另一个是 echarts, 我个人觉得 highcharts 更强大一点, 但是企业用 highcharts 可能要收费, echarts 是免费的), 下面就来介绍下 highcharts 吧.
highcharts 的官方文档: http://www.hcharts.cn/ , 新人学习的话, 建议多看实例, 对照着实例看 Api, 了解各个 API 的作用 (记不住也没事啦, 每次就再打开文档看看就是了).
例如, 之前学的时候个人觉得比较难的动态实时的图表
动态模拟实时数据
地址: https://code.hcharts.cn/demos/hhhhDv (因为公司电脑不带屏幕录制视频, 大家可以点开链接看一下动态效果);
html 代码
这里图表的宽和高可以通过改变 html 里父级元素改变
<div id="container" style="min-width:400px;height:400px"></div>
引入 (这个很重要)
- <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
- <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
- js(这里复制文档中案例代码并加一些注释)
- function activeLastPointToolip(chart) {
- var points = chart.series[0].points;
- chart.tooltip.refresh(points[points.length -1]);
- }
- $('#container').highcharts({
- chart: { // 图表的类型设置
- type: 'spline',
- animation: Highcharts.svg, // don't animate in old IE
- marginRight: 10,
- events: {
- load: function () {
- // 每一秒更新一个点
- var series = this.series[0],
- chart = this;
- setInterval(function () {
- var x = (new Date()).getTime(), // 当前时间
- y = Math.random(); // 随机 y 轴的值
- series.addPoint([x, y], true, true); // 将 x,y 轴加入数组中
- activeLastPointToolip(chart)
- }, 1000);
- }
- }
- },
- title: {
- text: '动态模拟实时数据'
- },
- xAxis: {
- type: 'datetime',
- tickPixelInterval: 150
- },
- yAxis: {
- title: {
- text: '值'
- },
- 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: '随机数据',
- 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;
- }())
- }]
- }, function(c) {
- activeLastPointToolip(c)
- });
以上是一条线的动态数据, 在此基础上, 下面是两条线的代码, 多条线同例; 我把加另一条线的代码标记了, 有需要的可以借照此代码 (当时工作的时候看到四条线的动态数据模拟, 花了一些时间做出来的)
- function activeLastPointToolip(chart) {
- var points = chart.series[0].points;
- chart.tooltip.refresh(points[points.length -1]);
- }
- $('#container').highcharts({
- chart: {
- type: 'spline',
- animation: Highcharts.svg, // don't animate in old IE
- marginRight: 10,
- events: {
- load: function () {
- // set up the updating of the chart each second
- var series = this.series[0],
- series1= this.series[1], // 另一条线
- chart = this;
- setInterval(function () {
- var x = (new Date()).getTime(), // current time
- y = Math.random();
- y1= Math.random(); // 另一条线
- series.addPoint([x, y], true, true);
- series1.addPoint([x, y1], true, true); // 另一条线
- activeLastPointToolip(chart)
- }, 1000);
- }
- }
- },
- title: {
- text: '动态模拟实时数据'
- },
- xAxis: {
- type: 'datetime',
- tickPixelInterval: 150
- },
- yAxis: {
- title: {
- text: '值'
- },
- 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: '随机数据',
- data: (function () {
- 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;
- }()),
- },{ // 另一条线数据开始
- name: '随机数据',
- data: (function () {
- 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;
- }()),
- } // 另一条线数据结束
- ]
- }, function(c) {
- activeLastPointToolip(c)
- });
其他的图表, 一般情况下, 案例里都可以找到, 以后有时间再分享用 ajax 请求或者前后端不分离使用假数据模拟图表吧.
来源: http://www.jianshu.com/p/676318ca8cf3