highcharts的自学方式以及动态模拟实时数据

啦啦啦，我又出来活跃啦，来到新公司的第一篇简书，我打算写写我最近自学的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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img.hcharts.cn/highcharts/highcharts.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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请求或者前后端不分离使用假数据模拟图表吧。

作者：孙静静
链接：https://www.jianshu.com/p/676318ca8cf3