2

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

 <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等...）请帮助我。

4

1 回答 1

1

您不能有一个总计小于 100% 的饼图，因此库假设您传递的值的总和将被视为 100%。

5.5/23 = 23.9%由于您没有通过 77，因此您的值仅加起来为 23。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/

于 2016-01-14T06:27:51.510 回答