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

IT技术 javascript charts highcharts
2021-03-15 03:02:08

我有一个简单的 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个回答

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

这里的例子:

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

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

这仅适用于一个系列。如果我有多个系列呢?
2021-04-29 03:02:08
如果您有多个系列要显示为百分比,您真正应该做的是直接绘制百分比值。如果您想在工具提示中显示原始值,您可以发送该数据作为数据点对象中的可选属性。
2021-04-30 03:02:08

@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) + '%';
  }
}

试试这个.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;
}
不幸的是,这不起作用。正如文档中所说,this.percentage仅给出堆叠系列切片的百分比。我的系列不是堆叠的,它只是一个简单的系列。
2021-04-28 03:02:08
然后制作一个自定义函数,在将其设置为 highcharts 本身之前输出总数。“for”循环,每次将变量增加“y”就可以了。
2021-05-16 03:02:08

Highchart 库非常丰富,内置功能。如果您只想将图表上的数字提高到某个数字。你可以试试下面的功能。

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)