12

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

4

4 回答 4

28

您必须遍历数据并获取总数，然后使用 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/ )

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

于 2013-05-30T13:56:13.143 回答
4

@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) + '%';
  }
}
于 2018-11-02T04:55:45.687 回答
-1

试试这个.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;
}
于 2013-05-30T13:37:15.497 回答
-1

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

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)
于 2020-04-22T11:34:45.113 回答