简单条形图占总数的 Highcharts 百分比 [英] Highcharts percentage of total for simple bar chart

问题描述

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

这是一张图片，显示了我的追求和我现在的位置:

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

:

更新带有轴标签的示例:

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

[[编辑评论

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

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

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

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

I have a simple 1-series bar chart where each bar has a nominal value. I can plot this fine with the data labels and axis representing the value for each bar but I'd like to have the data label and axis show the percentage of the total of the series while the nominal value is shown in a tooltip on hover (thus I don't want to convert the data to percentages prior to plotting).

Here is an image showing what I'm after and where I am now:

fiddle

Here's what I currently have for axis labels as the formatter function:

plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                        return Highcharts.numberFormat(this.y,0);
                    }
                }
            }
        }

Is there some formatter function variable I can use to achieve this? I know it is easily done on a pie chart but I feel bar charts represent data much better.

EDIT: To put it simply, how do I get the sum of all the series' points? Once I have this it is straightforward to get the percentage:

return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";

where this.y.total is the sum of the series.

解决方案

You'll have to loop through the data and get the total, and then use the datalabel formatter function to get the percent.

Example here:

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

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

edit::

updated example with axis labels:

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

[[EDIT for comments

If you are trying to plot the percent values of multiple series, there are a variety of fundamental problems that arise.

If you are calculating the % of two different data series, and displaying the % value even though you've plotted the raw value, your chart will be misleading and confusing in most cases.

Plotting the data as the percent values directly is the best way to go in that case, and you can add the raw data value as an extra property in the point object if you want to display it in a tool tip or elsewhere ( ie http://jsfiddle.net/JVNjs/735/ )

If you insist on using the original method on two different series, then you can just create two different variables to calculate against, and check the series name in the formatter to determine which data sum to calculate against.

这篇关于简单条形图占总数的 Highcharts 百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！