Highcharts简单条形图的总百分比-Java 学习之路

我有一个简单的1系列条形图，每个条形图都有一个标称值 . 我可以使用数据标签和轴来表示每个条形图的值，但是我希望数据标签和轴显示系列总数的百分比，而标称值显示在悬停的工具提示中（因此我不想在绘图之前将数据转换为百分比） .

这是一张图片，展示了我现在和我现在所处的位置：

enter image description here

以下是我目前对轴标签作为格式化程序功能的内容：

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 是系列的总和 .

3 回答

23
您必须遍历数据并获取总数，然后使用datalabel formatter函数来获取百分比 .

这里的例子：

http://jsfiddle.net/JVNjs/319/
```
formatter:function() {
  var pcnt = (this.y / dataSum) * 100;
  return Highcharts.numberFormat(pcnt) + '%';
}
```
编辑：：

带有轴标签的更新示例：

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

[[EDIT for comments

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

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

在这种情况下，将数据直接绘制为百分比值是最佳方式，如果要在工具提示或其他位置显示原始数据值，可以将其作为额外属性添加（即http://jsfiddle.net/JVNjs/735/）

如果您坚持在两个不同的系列上使用原始方法，那么您可以创建两个不同的变量来计算，并检查格式化程序中的系列名称以确定要计算的数据总和 .
回复于 2024-04-16T13:24:28+08:00
0
@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) + '%';
  }
}
```
回复于 2024-04-16T13:24:28+08:00
1
试试这个 . 百分比

它也在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;
}
```
回复于 2024-04-16T13:24:28+08:00

Highcharts简单条形图的总百分比

3 回答

相关问题