Highcharts技巧总结(持续更新)

1.动态显示隐藏dataLables

Highcharts没有提供方法动态显示或者隐藏dataLables，可以通过Jquery显示或者隐藏dataLables。

显示点值代码：

$('#container .highcharts-data-labels').show();

隐藏点值代码：

$('#container .highcharts-data-labels').hide();

Demo链接

2.自定义显示

Highcharts提供了formatter格式化显示内容，比如要让dataLabels颜色为当前series线条颜色。

plotOptions: {
     line: {
           dataLabels: {
               enabled: true,
               formatter:function(){
                   console.log(this.series);
                   return '<span style="color:'+this.series.color+'">'+this.y+'</span>';
               }
           }
       }
   },

如果不清楚color对应属性，可以直接console.log(this.series)打印出this.series对象，然后在调试工具中查看该对象并找到color对应的键名称。

Demo链接