Google chart api Неверный индекс строки. Должно быть в диапазоне [0-4] - PullRequest
0 голосов
/ 25 января 2019

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

Это код java-скрипта, который я использую для отображения диаграммы, если я жестко кодирую значения в google.visualization.DataTable (); гистограмма отображается правильно. Если я пытаюсь получить значения из объекта сценария java, он показывает ошибку. введите описание изображения здесь

Я использую код Java-скрипта

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  
  var obj = JSON.parse('<?php echo json_encode($enroled_course) ?>');

 google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);

function drawMaterial() {

  //  alert(obj.toSource());

 var data = new google.visualization.DataTable();
  data.addColumn('string', 'Course Name');
  data.addColumn('number', 'Completion Percentage');
  
 data.addRows(20);

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {   
    var val = obj[key];
    var course_percent=val.id;
    var course_name=val.fullname;
   data.setCell(course_name,course_percent);
    //console.log(val);
  }
}


/*var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);*/

      var materialOptions = {
        chart: {
          title: 'Enrolled courses Details'
        },
        hAxis: {
          title: 'Completion Percentage',
          minValue: 0
        },
        vAxis: {
          title: 'Courses'
        },
        bars: 'vertical'
      };
      var materialChart = new google.charts.Bar(document.getElementById('chart_div'));
      materialChart.draw(data, materialOptions);
    }
</script>
<div id="chart_div"></div>
<div class="container">
  <div class="row rounded">
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Буду очень признателен, если кто-нибудь скажет, почему я получаю неверную ошибку индекса строки, когда я пытаюсь вставить строку в data.setCell (); метод. Я видел похожую ошибку, но не смог найти причину.

1 Ответ

0 голосов
/ 25 января 2019

метод таблицы данных setCell принимает следующие аргументы ...

setCell(rowIndex, columnIndex, value);

вы пытаетесь передать значения строки, что вызывает ошибку ...

data.setCell(course_name,course_percent);

вместо этого не добавляйте строки изначально, (удалите -> data.addRows(20);)
добавьте их, как только получите значения ...

см. следующий фрагмент ...

var data = new google.visualization.DataTable();
data.addColumn('string', 'Course Name');
data.addColumn('number', 'Completion Percentage');

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {   
    var val = obj[key];
    var course_percent=val.id;
    var course_name=val.fullname;
    data.addRow([course_name,course_percent]);
  }
}
...