我有一个简单的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
是级数之和。
4条答案
按热度按时间jfewjypa1#
您必须循环遍历数据并获得总数,然后使用datalabel格式化程序函数获得百分比。
示例如下:
http://jsfiddle.net/JVNjs/319/
编辑::
轴标签的更新示例:
http://jsfiddle.net/JVNjs/320/
如果试图绘制多个系列的百分比值,则会出现各种基本问题。
如果您正在计算两个不同数据系列的百分比,并且即使绘制了原始值也要显示百分比值,则在大多数情况下,您的图表会产生误导和混淆。
在这种情况下,直接将数据绘制为百分比值是最好的方法,如果您想在工具提示或其他地方显示原始数据值,可以将其作为额外属性添加到point对象中(即http://jsfiddle.net/JVNjs/735/)
如果您坚持对两个不同的序列使用原始方法,那么您可以创建两个不同的变量来进行计算,并在格式化程序中检查序列名称,以确定要对哪个数据求和。
qnyhuwrf2#
@jlbriggs给出了一个很好的答案,并引导我创建了这个格式化器函数。这个函数总是检查数据中的 current 值。如果数据在以后以编程方式更新,百分比将反映新更新的数据。不需要
dataSum
或循环,因为.map().reduce()
会为您处理这些问题。vqlkdk9b3#
试试这个。百分比
highcharts API中也有很好的记录。
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
编辑
因为你需要它为非堆叠系列,你需要在生成图形之前得到总数...下面的函数将你的值加到一个变量中,你可以在以后的格式化函数中使用它。
sd2nnvve4#
Highchart库是非常丰富的内置函数。如果你想只为图表上的数字达到一定的数字。你可以给予一个尝试下面的函数。