Google饼图百分比计算

Question

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

 <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 等等......但我想用我在 'Sale In Percent' 列中给出的内容绘制饼图。（意味着 product1 绘制5.5 等...）请帮助我。

Answer 1

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

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

如果您想让图表显示标签读取您提供的百分比，您需要做的第一件事是将 pieSliceText 选项设置为 value 以使用 [= 标记切片27=] (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/

Google饼图百分比计算

Google Pie chart percentage calculation

javascript

jquery

charts

google-visualization

google-pie-chart