highcharts折线图使用基础

实例地址https://www.hcharts.cn/demo/highcharts
文档地址https://api.hcharts.cn/highcharts
ps：写在前面的话
highcharts有基于jq的版本(应该是比较旧的)，有直接用js的，两者什么区别暂时不知道，语法一样，基于jq版的，要先引入jq，然后使用方式如下：

// 这个highcharts.js我就不放出来了，建议用新版

另外直接在官网下载的最新版本，使用如下：

下面从本人遇到过的问题开始介绍：

x轴 xAxis：

var chart = Highcharts.chart('container', {
    xAxis: {
        labels: {
            formatter: function(){
                return ['2018-06-25','2018-06-26','2018-06-27'][this.value]
            }
        },
        tickInterval : 1,
    },
    series: [{
        name: '工人',
        data: [29,30,31]
    }],
});

用labels的话，会遇到一个问题，悬浮框tooltip里面无法显示横坐标,默认是0,1,2...如下图：

image.png

xAxis: {
  categories: ['2018-06-25','2018-06-26','2018-06-27'],
  tickInterval : 1,
},

用categories的话，又不是从原点开始，感觉适合条形图，如下图。

image.png

解决办法：
在使用labels的时候，把series里面的data封装一下，把横坐标塞进去，这样tooltip里面的0,1,2就会换成对应横坐标。如下：

series: [{
  name: '工人',
  data: [['2018-06-25',29],['2018-06-26',30],['2018-06-27',31]]
}],

y轴 yAxis：(以及悬浮框tooltip 和 数据 series)

var chart = Highcharts.chart('container', {
    xAxis: {
        labels: {
            formatter: function(){
                return ['2018-06-25','2018-06-26','2018-06-27'][this.value]
            }
        },
        tickInterval : 1,
    },
    yAxis: [
        {
            title: {
                text: 'y轴1'
            },
            labels : {
                style : {
                    color : 'red'
                },
                formatter: function(){
                    return this.value + '%';//这样可以加单位
                }
            },
            gridLineWidth : 1,
            gridLineDashStyle : 'ShortDash',
            gridLineColor : '#ddd',
        }, {
            title: {
                text: 'y轴2'
            },
            opposite: true,//显示在右边
            labels : {
                style : {
                    color : 'blue'//y轴文字颜色
                }
            },
            gridLineWidth : 1,
            gridLineDashStyle : 'ShortDash',
            gridLineColor : '#ddd',
        }
    ],
    tooltip: {
        //headerFormat : '{series.name}
',//若是设置这个的话，就是更改悬浮框的标题，
//就是前面纠结的悬浮框里面那个横坐标的问题，但是这里不能设置成横坐标的原因是：
//这里可用的变量比较少，主要是point 和series对象的属性，比如 point.key，series.name，series.color。
//所以最后还是改变series里面的data。
        shared: true,//多个一起显示
        crosshairs: true,//出现一条竖线
    },
    series: [{
        name: '女生比率',
        data: [['2018-06-25',29],['2018-06-26',30],['2018-06-27',31]],
        color: 'yellow',//线的颜色
        visible : true,//初始化的时候 是否显示
        yAxis: 0,//用第1条y轴
        tooltip: {
            valuePrefix: '比率：',
            valueSuffix: '%'
        },
    },{
        name: '医生数量',
        data: [['2018-06-25',28],['2018-06-26',35],['2018-06-27',30]],
        color: 'green',
        visible : true,
        yAxis: 1,//用第2条y轴
    }],
});

image.png

图例 legend：

legend: {
  align: 'left',
  verticalAlign: 'top',
  x : 10,//偏移量
  borderWidth: 1
},

image.png

点击事件 plotOptions：

默认的是显示和隐藏相关的折线，用return false可以取消这个事件。

plotOptions : {
    series : {
        events : {
            // 图例点击事件
            legendItemClick: function(event) {
                return false;//点击就没效果了，不会显示和隐藏了
            }
        }
    }
}

在这里面我们可以做很多事情，我们可以更新y轴的文字颜色，更新series里面的数据，比如用哪条y轴等等。
更新都是用update方法，显示隐藏series里面的数据，用hide()/show();等等

legendItemClick: function(event) {
    chart.yAxis[0].update({
        labels : {
            style : {
                color : '#000'
            },
            formatter: function () {
                return this.value;
            }
        },
    });
    return false;//我放这个是因为我数据较少，不想让唯一的两条数据隐藏一条
}

legendItemClick: function(event) {
    //chart.series[0].hide();//可以让第一条数据隐藏
    chart.series[this.index].update({
        yAxis : 1
    });
    return false;
}

具体查看官网里面的方法，里面说的很详细：

image.png