简单条形图占总数的高图表百分比答案

【问题标题】：Highcharts percentage of total for simple bar chart简单条形图占总数的高图表百分比
【发布时间】：2020-04-22 19:34:45
【问题描述】：

我有一个简单的 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 是系列的总和。

【问题讨论】：

标签： javascript charts highcharts

【解决方案1】：

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

此处示例：

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

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

编辑::

带有轴标签的更新示例：

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

[[为 cmets 编辑

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

如果您要计算两个不同数据系列的百分比，并在绘制原始值的情况下显示百分比值，那么在大多数情况下，您的图表会产生误导和混淆。

在这种情况下，直接将数据绘制为百分比值是最好的方法，如果您想在工具提示或其他地方显示原始数据值，可以将原始数据值作为额外属性添加到点对象中（即http://jsfiddle.net/JVNjs/735/)

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

【讨论】：

这仅适用于一个系列。如果我有多个系列，那么？
如果您有多个系列想要显示为百分比，那么您真正应该做的是直接绘制百分比值。如果您想在工具提示中显示原始值，可以将该数据作为数据点对象中的可选属性发送。

【解决方案2】：

@jlbriggs 有一个很好的答案，并带领我走上了创建这个格式化程序函数的道路。此函数始终检查数据中的当前值。如果稍后以编程方式更新数据，则百分比将反映新更新的数据。不需要 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) + '%';
  }
}

【讨论】：

【解决方案3】：

试试这个百分比

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;
}

【讨论】：

不幸的是，这不起作用。正如它在文档this.percentage 中所说的那样，仅给出了堆叠系列切片的百分比。我的系列没有堆叠，只是一个简单的系列。
然后制作一个自定义函数来输出总数，然后再将其设置为 highcharts 本身。一个“for”循环，每次将变量增加“y”就可以了。

【解决方案4】：

Highchart 库具有非常丰富的内置功能。如果您只想将图表上的数字设为特定数字。你可以试试下面的功能。

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)

【讨论】：