Highcharts技巧总结(持续更新)

来源:互联网 发布:数据脱敏与数据匿名 编辑:程序博客网 时间:2024/06/05 16:18

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链接



0 0
原创粉丝点击