Google Charts - столбцы и таблицы для отображения на той же странице - PullRequest
Новая
       4

Google Charts - столбцы и таблицы для отображения на той же странице

1 голос
/ 05 марта 2020

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','table']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawTable);

function drawChart() {
var count = ${fn:length(columnChartDataList)};
    var data = google.visualization.arrayToDataTable([
     ['Genere','Beverage', 'Food', 'Industrial', 'Un-Filled', { role: 'annotation' } ],
     <c:forEach items="${columnChartDataList}" var="entry">
        [ '${entry.key}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, '' ],
      </c:forEach>
   ]);              
var options = {
 title: "Tank Consumptions by Locations as on Today",
 width: 720,
 height: 500,
 legend: { position: 'top', maxLines: 2 },
 bar: { groupWidth: '70%' },
 isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}


function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);
  var table = new google.visualization.Table(document.getElementById('chart_div1'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>

<div id="chart_div"></div>
<div id="chart_div1"></div>

, как я могу показать обе диаграммы для моей панели. а также я должен связать одни и те же данные для обеих диаграмм ...

1 Ответ

1 голос
/ 05 марта 2020

Я видел проблемы в прошлом при использовании двух вызовов -> setOnLoadCallback
, но это должно быть исправлено.

в любом случае, вы можете использовать обещание, которое возвращает оператор load. 

google.charts.load('current', {
  packages: ['corechart','table']
}).then(function () {
  drawChart();
  drawTable();
});

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

google.charts.load('current', {
  packages: ['corechart','table']
}).then(function () {
  drawChart();
  drawTable();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Genere', 'Beverage', 'Food', 'Industrial', 'Un-Filled', { role: 'annotation' } ],
    ['Test', 5, 10, 15, 20, '20']
  ]);
  var options = {
    title: "Tank Consumptions by Locations as on Today",
    width: 720,
    height: 500,
    legend: { position: 'top', maxLines: 2 },
    bar: { groupWidth: '70%' },
    isStacked: true,
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}


function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);
  var table = new google.visualization.Table(document.getElementById('chart_div1'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div1"></div>
...