joyfixing的博客

行百里者半九十

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



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/joyfixing/article/details/50780542
文章标签: Highcharts
个人分类: HighCharts
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Highcharts技巧总结(持续更新)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭