javascript 简单条形图占总数的 Highcharts 百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16837209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts percentage of total for simple bar chart
提问by harryg
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).
我有一个简单的 1 系列条形图，其中每个条形都有一个标称值。我可以用数据标签和轴表示每个条的值，但我希望数据标签和轴显示系列总数的百分比，而标称值显示在悬停时的工具提示中（因此我不想在绘图之前将数据转换为百分比）。
Here is an image showing what I'm after and where I am now:
这是一张图片，显示了我的追求和我现在的位置：
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 formatterfunction 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.
是否有一些formatter函数变量可以用来实现这一点？我知道在饼图上很容易完成，但我觉得条形图更好地代表数据。
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) + "%";
return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";
where this.y.totalis the sum of the series.
哪里this.y.total是系列的总和。
回答by jlbriggs
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/
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/
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/)
在这种情况下，将数据直接绘制为百分比值是最好的方法，如果您想在工具提示或其他地方（即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.
如果您坚持在两个不同的系列上使用原始方法，那么您只需创建两个不同的变量来计算，并检查格式化程序中的系列名称以确定要计算的数据总和。
回答by strikemike2k
@jlbriggs had a great answer and lead me onto the path of creating this formatter function. This function always checks the currentvalues in the data. If the data is updated programmatically at a later time, the percentages will reflect the newly updated data. No dataSumor loop is necessary as the .map().reduce()takes care of that for you.
@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) + '%';
}
}
回答by Sachin Mishra
Highchart library is very enrich with build in functions. if you would like to just for the number on chart up to certain number. you can give a try for below function.
Highchart 库非常丰富，内置功能。如果您只想将图表上的数字提高到某个数字。你可以试试下面的功能。
import {numberFormat} from 'hicghart';
then you can achieve the below way formating
numberFormat(this.y,decimalPlaceToFormat)
回答by Joris Kroos
try this.percentage
试试这个.percentage
It's pretty well documented in the highcharts API as well.
在 highcharts API 中也有很好的记录。
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
EDIT
编辑
Since you'd need it for non-stacked series, you'd need to get the total before generating the graph... The function below adds up your values into one variable which you can use in your formatter function later.
由于您需要将它用于非堆叠系列，因此您需要在生成图形之前获得总数......下面的函数将您的值加到一个变量中，您可以稍后在格式化程序函数中使用该变量。
function arrayTotal(arr)
{
var total = 0;
for (var i = 0, value; value = arr[i]; i++)
{
total += value;
}
return total;
}
