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

a11xaf1n  于 2023-01-04  发布在  Java
关注(0)|答案(4)|浏览(235)

我有一个简单的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是级数之和。

jfewjypa

jfewjypa1#

您必须循环遍历数据并获得总数,然后使用datalabel格式化程序函数获得百分比。
示例如下:
http://jsfiddle.net/JVNjs/319/

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

编辑::
轴标签的更新示例:
http://jsfiddle.net/JVNjs/320/

  • [[编辑以供评论*

如果试图绘制多个系列的百分比值,则会出现各种基本问题。
如果您正在计算两个不同数据系列的百分比,并且即使绘制了原始值也要显示百分比值,则在大多数情况下,您的图表会产生误导和混淆。
在这种情况下,直接将数据绘制为百分比值是最好的方法,如果您想在工具提示或其他地方显示原始数据值,可以将其作为额外属性添加到point对象中(即http://jsfiddle.net/JVNjs/735/
如果您坚持对两个不同的序列使用原始方法,那么您可以创建两个不同的变量来进行计算,并在格式化程序中检查序列名称,以确定要对哪个数据求和。

qnyhuwrf

qnyhuwrf2#

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

vqlkdk9b3#

试试这个。百分比
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;
}
sd2nnvve

sd2nnvve4#

Highchart库是非常丰富的内置函数。如果你想只为图表上的数字达到一定的数字。你可以给予一个尝试下面的函数。

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)

相关问题