如何设置使用 Google 图表完成的工作量的百分比答案

【问题标题】：How to set a Percentage of an Amount of work done using Google Charts如何设置使用 Google 图表完成的工作量的百分比
【发布时间】：2017-03-06 21:01:35
【问题描述】：

我查看了所有文档，但我找不到具体记录要传递给饼图的数据类型以显示百分比的哪一部分是在考虑饼图时仍需要完成工作的数量全部 100%。

假设我们已经完成了以下任务。 1. 数据库 2.前端 3. 网页设计

数据库已完成 45% 前端已完成 35% 网页设计已完成 60%。

我可以将百分比和小数传递给数据表，但是当它们传递 1、3、2 等数字时我会迷路。

目标是让投资者在饼图中看到剩余的工作量，我应该如何使用小数或百分比来做到这一点？

我可能没有正确询问，因为如果从 100% 开始时剩余的工作量将不起作用。

我如何根据构成 100% 工作的大约 10 个切片向投资者展示，我应该将哪些数据传递给这种类型的饼？

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

所以，我想再次使用饼图供投资者查看完成的工作量。

这是我的提琴手。

Check Fiddler

【问题讨论】：

标签： javascript charts google-visualization pie-chart

【解决方案1】：

将一个变量传递到饼图的数据部分，表示尚未完成的工作。您可以自己对其进行硬编码，或者使用通过从总数中减去已完成工作计算得出的值。

例如

数据库 = 45;

后端 = 35;

网页设计 = 60；

剩余工作 = 300 - [数据库 + 后端 + 网页设计]；

您可以将其在饼图中的颜色设置为灰色，并将其名称留空。

【讨论】：

【解决方案2】：

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    drawChart('Database', 45);
    drawChart('Front-end', 35);
    drawChart('Web Design', 60);
  },
  packages:['corechart']
});

function drawChart(task, complete) {
  var data = google.visualization.arrayToDataTable([
    ['Task', task],
    ['Complete', complete],
    ['Remaining', 100 - complete]
  ]);

  var options = {
    title: task,
    pieHole: 0.3
  };

  var container = document.body.appendChild(document.createElement('div'));
  var chart = new google.visualization.PieChart(container);
  chart.draw(data, options);
}

&lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;

【讨论】：

这比我希望的要多，谢谢，太棒了！