實例地址https://www.hcharts.cn/demo/highcharts
文檔地址https://api.hcharts.cn/highcharts
ps：寫在前面的話
highcharts有基于jq的版本(應該是比較舊的)，有直接用js的，兩者什么區(qū)別暫時不知道，語法一樣，基于jq版的，要先引入jq，然后使用方式如下：

<div id="container" style="width: 600px;height:400px;"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
// 這個highcharts.js我就不放出來了，建議用新版
<script type="text/javascript">
$('#container').highcharts({
    series: [{
        name: '工人',
        data: [29,30,31]
    }],
    plotOptions : {
        series : {
            events : {
                legendItemClick: function(event) {
                    console.log(this);
                    console.log(this.chart);
                }
            }
        }
    }
});
</script>

另外直接在官網(wǎng)下載的最新版本，使用如下：

<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
    series: [{
        name: '工人',
        data: [14,20,21]
    }],
    plotOptions : {
        series : {
            events : {
                legendItemClick: function(event) {
                    console.log(this);
                    console.log(this.chart);
                    console.log(chart);//this.chart = chart
                }
            }
        }
    }
});
</script>

下面從本人遇到過的問題開始介紹：

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 和 數(shù)據(jù) 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 : '<span>{series.name}</span><br>',//若是設置這個的話，就是更改懸浮框的標題，
//就是前面糾結(jié)的懸浮框里面那個橫坐標的問題，但是這里不能設置成橫坐標的原因是：
//這里可用的變量比較少，主要是point 和series對象的屬性，比如 point.key，series.name，series.color。
//所以最后還是改變series里面的data。
        shared: true,//多個一起顯示
        crosshairs: true,//出現(xiàn)一條豎線
    },
    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: '醫(yī)生數(shù)量',
        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：

默認的是顯示和隱藏相關(guān)的折線，用return false可以取消這個事件。

plotOptions : {
    series : {
        events : {
            // 圖例點擊事件
            legendItemClick: function(event) {
                return false;//點擊就沒效果了，不會顯示和隱藏了
            }
        }
    }
}

在這里面我們可以做很多事情，我們可以更新y軸的文字顏色，更新series里面的數(shù)據(jù)，比如用哪條y軸等等。
更新都是用update方法，顯示隱藏series里面的數(shù)據(jù)，用hide()/show();等等

legendItemClick: function(event) {
    chart.yAxis[0].update({
        labels : {
            style : {
                color : '#000'
            },
            formatter: function () {
                return this.value;
            }
        },
    });
    return false;//我放這個是因為我數(shù)據(jù)較少，不想讓唯一的兩條數(shù)據(jù)隱藏一條
}

legendItemClick: function(event) {
    //chart.series[0].hide();//可以讓第一條數(shù)據(jù)隱藏
    chart.series[this.index].update({
        yAxis : 1
    });
    return false;
}

具體查看官網(wǎng)里面的方法，里面說的很詳細：

image.png