javascript - Highcharts 简单条形图占总数的百分比

Question

我有一个简单的 1 系列条形图，其中每个条形都有一个标称值。 我可以用代表每个条形值的数据标签和轴绘制这个很好，但我想让数据标签和轴显示系列总数的百分比，而标称值显示在悬停时的工具提示中(因此我不想在绘图之前将数据转换为百分比)。

这是一张图片，显示了我所追求的以及我现在所处的位置:

fiddle

这是我目前将轴标签用作格式化程序函数的内容:

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

您必须遍历数据并获取总数，然后使用数据标签格式化程序函数获取百分比。

示例:

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/ )

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