转载highcharts 如何让数据点的X和Y轴对应值均显示在数据标签内实例

转载原地址： http://www.stepday.com/topic/?765

 

今天有一个朋友问到这样一个关于highcharts图表的实用性问题，就是需要将每一根柱子对应的x和y轴数据显示在柱子内部。形如下图所示：

那么我们如何才能够通过如何配置达到上图的效果呢？

1、我们如何让数据点上显示数据标签值？

我们如果想让数据点上显示数据标签值也就是显示当前数据点的数据值，我们通常需要配置PlotOptions内的dataLabels标签，里面有一个enabled属性，表示是否显示标签值。设置为true，则就会显示数据值于数据点附近。配置如下所示：

view sourceprint?

01.PlotOptions:{

02.   bar:{

03.        series:{

04.               dataLabels:{

05.                      enabled:true //显示数据标签

06.                }

07.         }

08.    }

09.}

这样配置后数据标签将会显示在bar图内每一根柱子的右侧外端。

2、如何让标签显示在柱子内且靠右显示呢？

通过观察PlotOptions内的dataLabels属性节点，不难发现有两个非常引人注目的属性：align和inside。

1）、align：表示标签相对于数据点在水平方向上的位置，取值范围为：left、center、right，默认为left，显示在数据点的外侧，不过我们需要设置其值为right，显示在柱子内部。

2)、inside：表示是否显示在柱子内部；默认为false，显示在柱子外侧。我们如果设置了align属性值为right，则无须设置此属性。如果align为left，通过设置此值可以将数据标签显示在柱子内部中间位置。通过调整align为right也即可完成。

view sourceprint?

01.PlotOptions:{

02.   bar:{

03.        series:{

04.               dataLabels:{

05.                      enabled:true, //显示数据标签

06.                      align:"right",

07.                      inside:true

08.                }

09.         }

10.    }

11.}

3、如何设置标签的颜色值？

默认情况下标签字体为黑色，显示在蓝色柱子内会很不突出，所以我们需要设置标签的颜色为白色：

view sourceprint?

01.PlotOptions:{

02.   bar:{

03.        series:{

04.               dataLabels:{

05.                      enabled:true, //显示数据标签

06.                      align:"right",

07.                      inside:true,

08.                      color:"#fff" //标签为白色

09.                }

10.         }

11.    }

12.}

4、如何通过标签格式化方法拿到数据点的x和y数据？

view sourceprint?

01.plotOptions: {

02.           series: {

03.               dataLabels: {

04.                   align:"right",

05.                   inside:true,

06.                   color:"#fff",

07.                   enabled: true,

08.                   formatter:function(){

09.                       //通过标签格式化方法范围数据点的x和y值所拼接的数串

10.                       return this.x+"："+this.y;

11.                   }

12.               },

13.               pointWidth:20 //每一根柱子的宽度值

14.           }

15.       },

 

这样通过以上几个步骤我们就完成了将数据点的x和y值显示在柱子内的标签上。

另外附上示例查看地址：http://fiddle.jshell.net/U8LbT/11/show/

如果有任何问题欢迎留言讨论，多谢！