Google饼图百分比计算 [英] Google Pie chart percentage calculation

问题描述

我有一个以饼图的形式显示数据的页面。我使用Google Charts，代码如下：

I have a page that displays data in a form of a Pie Chart. I use Google Charts and here is the code:

 <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/

And here's a working JS FIDDLE: https://jsfiddle.net/alex4uthis/j78vmq00/2/

这里我有另外1个产品作为product1，它的值是77.由于这个值总是更高我从图表中省略。当我绘制图表，我们可以看到product2％成为23.9％，product3％成为32.6等....但我想得到饼图绘制与我在销售百分比列中给出（意味着product1绘制5.5 etc ...）
请帮助我。

Here I have 1 more product as product1 and its value is 77. Since this value is always higher I omitted from the chart. When I draw the chart we can see product2 percent become 23.9%, product3 percent become 32.6 etc.... But I want to get the pie chart draw with what I have given in 'Sale In Percent' column.(Means product1 draw with 5.5 etc...) Please help me in this.

推荐答案

总计小于100％，因此图书馆假设您传递的值的总和被认为是100％。

You can't have a pie chart that totals less than 100%, so the library is assuming the sum of the values you pass it is to be considered 100%.

由于您没有通过77，您的值只能总计为23. 5.5 / 23 = 23.9％和 7.5 / 23 = 32.6％

Since you aren't passing the 77, your values only add up to 23. 5.5/23 = 23.9% and 7.5/23 = 32.6%

如果你想让图表显示标签读取你提供的百分比，你需要做的第一件事是设置 pieSliceText value 选项为片段标记片段的定量值（ https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=zh-CN#configuration-options ）

If you want to have the chart display with the labels reading your provided percentages, the first thing you need to do is set the pieSliceText option to value to label the slice with 'The quantitative value of the slice.' (https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options)

接下来，如果你想显示百分号的标签，你只需要在图表呈现后手动添加它们： p>

Next, if you want to show the label with a percent sign you will just want to go manually add them after the chart renders like so:

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

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

Here is a working fiddle: https://jsfiddle.net/tq37y0p5/1/

这篇关于Google饼图百分比计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！