谷歌餅圖百分比計算

Question

我有一個頁面，以餅圖的形式顯示數據。 我使用谷歌圖表，這里是代碼：

 <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 等等...... 5.5 等...）請幫助我。

Answer 1

餅圖的總和不能低於 100%，因此庫假設您傳遞給它的值的總和被視為 100%。

由於您沒有通過 77，因此您的值加起來僅為5.5/23 = 23.9%和7.5/23 = 32.6%

如果您想讓圖表顯示帶有讀取您提供的百分比的標簽，您需要做的第一件事是將pieSliceText選項設置為value以使用“切片的定量值”來標記切片。 （ 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 += '%';
        });

這是一個工作小提琴： https : //jsfiddle.net/tq37y0p5/1/