Google 图表 - 在同一页面中显示的柱形图和 Table 图表

Question

我正在尝试在同一页面中同时显示柱形图和 Table 图表。但只有柱形图显示正确...但是，Table 图表不显示只是空的 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: ',000'}, true],
    ['Jim',   {v:8000,   f: ',000'},  false],
    ['Alice', {v: 12500, f: ',500'}, true],
    ['Bob',   {v: 7000,  f: ',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>

如何为我的仪表板显示这两个图表。以及我是否应该为两个图表绑定相同的数据...

Answer 1

我过去在使用两次调用时遇到过问题 --> setOnLoadCallback
但这应该是固定的。

无论如何，您可以使用 promise load 语句 returns 代替。

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: ',000'}, true],
    ['Jim',   {v:8000,   f: ',000'},  false],
    ['Alice', {v: 12500, f: ',500'}, true],
    ['Bob',   {v: 7000,  f: ',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>

Google 图表 - 在同一页面中显示的柱形图和 Table 图表

Google Charts - Column & Table chart to display in same page

charts

google-visualization