Google Charts - 列和表格图表显示在同一页面中答案

【问题标题】：Google Charts - Column & Table chart to display in same pageGoogle Charts - 列和表格图表显示在同一页面中
【发布时间】：2020-03-05 04:27:34
【问题描述】：

我试图在同一页面中同时显示柱形图和表格图。但只有柱形图正确显示...但是，表格图表不只显示空 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>

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

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

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

无论如何，您可以改用load 语句返回的承诺。

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

请参阅以下工作 sn-p...

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>

【讨论】：