Highcharts简单条形图的总百分比

Question

我有一个简单的1系列条形图,每个条形图都有一个标称值.我可以使用数据标签和轴来表示每个条形图的值,但是我希望数据标签和轴显示系列总数的百分比,而标称值显示在悬停的工具提示中(因此我不想在绘图之前将数据转换为百分比).

这是一张图片,展示了我现在和我现在所处的位置:

小提琴

以下是我目前对轴标签作为格式化程序功能的内容:

plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                        return Highcharts.numberFormat(this.y,0);
                    }
                }
            }
        }

formatter我可以用一些函数变量来实现吗？我知道它很容易在饼图上完成,但我觉得条形图代表数据更好.

编辑:简单来说,我如何获得所有系列的积分？一旦我有了这个,就可以直接获得百分比:

return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";

哪个this.y.total是系列的总和.

Answer 1

您必须遍历数据并获取总数,然后使用datalabel formatter函数来获取百分比.

这里的例子:

http://jsfiddle.net/JVNjs/319/

formatter:function() {
  var pcnt = (this.y / dataSum) * 100;
  return Highcharts.numberFormat(pcnt) + '%';
}

编辑::

带有轴标签的更新示例:

http://jsfiddle.net/JVNjs/320/

[[编辑征求意见

如果您尝试绘制多个系列的百分比值,则会出现各种基本问题.

如果计算两个不同数据系列的百分比,并显示%值,即使您已绘制原始值,在大多数情况下,您的图表也会产生误导和混淆.

在这种情况下,将数据直接绘制为百分比值是最佳方式,如果要在工具提示或其他位置显示原始数据值,可以将其作为额外属性添加(即http: //jsfiddle.net/JVNjs/735/)

如果您坚持在两个不同的系列上使用原始方法,那么您可以创建两个不同的变量来计算,并检查格式化程序中的系列名称以确定要计算的数据总和.

Answer 2

@jlbriggs 有一个很好的答案，引导我走上创建这个格式化程序函数的道路。该函数始终检查数据中的当前值。如果稍后以编程方式更新数据，则百分比将反映新更新的数据。不需要dataSumor 循环，因为它.map().reduce()会为您处理这个问题。

dataLabels: {
  enabled: true,
  formatter: function() {
    var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
    return Highcharts.numberFormat(pcnt) + '%';
  }
}