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

Question

我查看了所有文档，但我找不到具体的文档，将什么类型的数据传递给饼图以显示在考虑饼图时仍需要完成多少百分比是100%的整体。

假设我们有以下任务。 1.数据库 2.前端 3. 网页设计

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

我可以将百分比和小数传递给数据 table 但是当他们传递数字 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

Answer 1

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

例如

数据库 = 45；

后端 = 35；

网页设计 = 60；

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

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

Answer 2

请参阅以下工作片段...

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);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>

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

How to set a Percentage of an Amount of work done using Google Charts

javascript

charts

google-visualization

pie-chart