javascript - 谷歌饼图百分比计算

Question

我有一个以饼图形式显示数据的页面。我使用 Google Charts，这里是代码:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      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);
      }
    </script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>

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

这里我还有 1 个产品作为 product1，它的值为 77。因为这个值总是更高，所以我从图表中省略了。当我绘制图表时，我们可以看到 product2 百分比变为 23.9%，product3 百分比变为 32.6 等等......但我想用我在“销售百分比”列中给出的内容绘制饼图。(意味着 product1 绘制5.5 等...)请帮助我。

Answer 1

饼图的总数不能低于 100%，因此库假设您传递给它的值的总和被视为 100%。

由于您没有超过 77，因此您的值加起来只有 23。5.5/23 = 23.9% 和 7.5/23 = 32.6%

如果您想让图表显示的标签读取您提供的百分比，您需要做的第一件事是将 pieSliceText 选项设置为 value 以标记slice with 'The quantitative value of the slice.' ( https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options )

接下来，如果您想显示带有百分号的标签，您只需在图表呈现后手动添加它们，如下所示:

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

这是一个有效的 fiddle :https://jsfiddle.net/tq37y0p5/1/