hicharts堆叠柱状图堆叠数据标签显示百分比

hicharts的堆叠柱状图，对于一些数据的统计有着很好的数据体验，但是堆叠的数据标签，好像只提供了一个总和的展示，如

但有的时候，我们需要统计一些数据的对比情况，比如我想知道如上图中的小刘的销售额占据总销售额的百分比，来确认小刘的销售业绩，同样也可以统计其他人的相关数据，这个时候我们就想将最想看到的、最关注的数据以百分比的形式放到堆叠标签的位置，还拿业绩的统计来说，我想统计小刘的销售业绩，或者想统计小张的销售业绩，我只要选择一定的条件，就可以在堆叠标签的位置显示最想要的数据，比如以百分比形式的数据。

要显示百分比数据，hicharts的api是没有提供相应的属性的，或者是我没有找到，它默认显示的就是对应的几条数据的总和。不过我们还是可以从hicharts提供的一些属性中提供的一些数据中计算出来相应数据占据总和的百分比。如下图所示：

以图为例，我们计算的是小彭的销售量占据总量的百分比，根据这样的一个要求，其实我们只需要2个数据就可以计算出来了，一个是每种水果的销售总量，一个是小彭每种水果的销量。至于每种销售水果的销售总量怎么获取到，没有从api中查到，或者我没有耐心的查下去，我直接打印了当前水果种类在图表中的所有数据，可以直接打印this。因为这个数据是Y轴统计的数据以及相关的运算，所以这些操作都是在yAxis模块下的操作，

stackLabels: {  // 堆叠数据标签
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                },
                formatter:function () {
                    console.log(this);
                }
            }

如enabled属性标识是否显示堆叠状，true为堆叠状，false则不是堆叠状。formatter是一个函数，可以将一些相关的动态操作的属性放在这里面完成，比如我们最后要显示的百分比就是在这个函数里通过return返回的。

我就是在formatter里面打印了this，我从里面找到了一个这样的属性total，表示总数，

因为我这里有5条数据，所以这里打印出来了5条数据，这里没有关系，我们验证过total这个属性是正确的。

然后我们该寻找另外一个值，分子了。这里的分子，也就是小彭的每种水果的销售额了。我们还是通过打印的this属性，查到了axis属性下的series属性，这个属性是一个数组，展开数组项，可以看到对应的数组的项数，就是我们统计了几项数据，这个数组的长度就是几，比如我们这里统计了小彭和小张两个人的水果销量，那么这个数组的长度就是2，通过查看数组项的具体内容，可以判断第2条数据为小彭的数据，然后就又找到了第二项下面有个属性yData，是个数组，里面对应了小彭每种水果的销售量。

到此为止，我们已经得到了每种水果的销售总额和小彭每种水果的销售额，那么只要将小彭的每种水果的销售额度区分开来，就是小彭每种销量占据总销售额的百分比的分子了。那么我们需要精准定位得到数组的每项都是小彭对应的销售额和当前水果种类的总额。这里，我又从打印的this信息中捕捉到了这么一个属性x，正好对应当前水果种类的排序，其值正好和前面获取到的值yData数组的索引完全对应起来。那么到此为止，我们可以通过计算yData数组项的值和当前总和的一个比例计算出小彭每种水果的销售量占据总销售额的百分比。具体实现代码如下：

yAxis: {
            min: 0,
            title: {
                text: '水果消费总量'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                },
                formatter: function () {
                    var yData = this.axis.series[1].yData[this.x]/this.total*100;
                    return yData.toFixed(1) + "%";
                }
            }
        },

效果图如下：

这种通过信息打印而不是通过给定api获取信息的方法虽然不是完美的解决方案，但也算得上一种解决问题的不错的方法。