谷歌饼图百分比计算

我有一个以饼图forms显示数据的页面。 我使用谷歌图表，这里是代码：

  google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Product', 'Sale In Percent'], ['product2', 5.5], ['product3', 7.5], ['product4', 1.5], ['product5', 8.5], ]); var options = { title: 'Product Sales' }; var chart = new google.visualization.PieChart(document.getElementById('piechart2')); chart.draw(data, options); }  
 

这是一个有效的JS FIDDLE： https ：//jsfiddle.net/alex4uthis/j78vmq00/2/

这里我还有1个产品作为product1，它的值是77.由于这个值总是更高，我从图表中省略了。 当我绘制图表时，我们可以看到product2百分比变为23.9％，product3百分比变为32.6等……但是我希望得到饼图绘制与我在’Sale In Percent’列中给出的内容。（表示产品1绘制5.5等…）请帮助我。

Answer 1

您不能拥有总计小于100％的饼图，因此库假定您传递的值的总和将被视为100％。

由于你没有通过77，你的价值只增加到23. 5.5/23 = 23.9%和7.5/23 = 32.6%

如果您希望图表显示的标签显示您提供的百分比，那么您需要做的第一件事就是将pieSliceText选项设置为value以使用“切片的定量值”标记切片。 （ https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=zh-CN#configuration-options ）

接下来，如果要显示带有百分号的标签，您只需要在图表渲染之后手动添加它们，如下所示：

 [].slice.call(document.querySelectorAll('#piechart2 path + text')) .forEach(function(el) { el.textContent += '%'; }); 

这是一个工作小提琴： https ： //jsfiddle.net/tq37y0p5/1/