好玩的图表插件 highcharts

highcharts官网地址：highcharts

1.允许图表放大功能：

在chart属性中添加

zoomType:'x', 或者 zoomType:'y', 或者 zoomType:'xy',

chart: {
    type: 'area',
    zoomType: 'xy',
},

2.设置鼠标停留点出显示的信息：

tooltip: {
    pointFormat: "CPU: {point.y:,.1f} %"
},

3.横坐标设为时间（传进去的横坐标的时间是时间戳格式）：

xAxis: {
    type: 'datetime',
},

4.不显示图表右下角的 Highcharts.com 图样

credits: {
    enabled: false
},

5.设置横坐标的时间，并定义鼠标停留点的展示样式：

横坐标设置为时间模式：

xAxis: {
    type: 'datetime',
},

鼠标停留点展示设置：

tooltip: {
    dateTimeLabelFormats: {
        day: '%Y-%m-%d',
        minute: '%H:%M',
    },
    formatter: function () {
        return '<b>时间:</b>'+  Highcharts.dateFormat('%Y年%m月%d日 %H:%M', this.key)  + '<br/><b>' + this.series.name + ':</b> ' + this.point.y + '%';
    }
},

部分效果图：

莫菲

好玩的图表插件 highcharts

莫菲