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

您必须遍历数据并获取总数，然后使用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有一个很好的答案，引导我进入创建此格式化程序功能的道路。此函数始终检查数据中的 current 值。如果以后通过编程方式更新数据，则百分比将反映新更新的数据。 dataSum不需要.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) + '%'; } } 会为您解决这个问题。

{{1}}

Answer 3

试试this.percentage

在highcharts API中也有很好的记录。

http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

修改

由于你需要它来处理非堆叠系列，你需要在生成图形之前得到总数...下面的函数将你的值加到一个变量中，你可以在以后的格式化函数中使用它。

function arrayTotal(arr)
{
  var total = 0;
  for (var i = 0, value; value = arr[i]; i++)
  {
    total += value;
  }
  return total;
}

Answer 4

Highchart库具有丰富的内置函数。如果您只想将图表上的数字增加到某个数字。您可以尝试以下功能。

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)