Рисование гугл р ie по данным Dynami c

Question

Я пытаюсь нарисовать простую диаграмму Google p ie, создав динамическую таблицу c, используя JavaScript.

Почему мой код не работает?

var g;
for (g=0; g <3; g++) {      
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Failed');
    data.addColumn('number', 'Passed');
    data.addRows(1);
    data.setCell(0, 0, "Work?");
    data.setCell(0, 1, 80);
    data.setCell(0, 2, 20);
    var chartName = 'piechart'+(g+1);  
    var chart = new google.visualization.PieChart(document.getElementById(chartName));   
    chart.draw(data,options);
}

3 p ie диаграммы рисуются на моем экране, но все они имеют один цвет и один срез, а не на 20% 80%, как в моем коде.

Кроме того, я не получаю никаких ошибок на моем консоль.

Answer 1

Вы стремитесь к чему-то подобному? Также, если вы можете, рассмотрите возможность использования addRows вместо setCell

Я думаю, что проблема в вашей таблице / структуре данных.

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

<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="piechart3"></div>

<script>
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {
    'packages': ['corechart']
  });

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var g;
    for (g = 0; g < 3; g++) {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'PassOrfail');
      data.addColumn('number', 'Percentage');

      data.addRows([
      ['Passed', 80],
      ['Failed', 20],
      ]);
      var chartName = 'piechart' + (g + 1);
      var chart = new google.visualization.PieChart(document.getElementById(chartName));
      chart.draw(data);
    }
  }
</script>