一页上有两个不同的Google图表

Question

我最初在page1上有一个列图，在page2上有一个线图。 它们在自己的页面上都显示良好。 当我尝试将两者合并在一页上时，它们都会显示，但它们都是列图。 我不确定自己在做什么错。 到目前为止，这是我的代码：

google.load('visualization', '1.0', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

function drawchart() {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');
  for (var i = 0; i < chartdatax.length; i++) {
      chartData.addRow([parseFloat(chartdatax[i]),
      parseFloat(chartdatay[i])]);
  };

   var options = {
       height: 500,
       hAxis: {
          title: 'Arm C.G',
          gridlines: {
            count: 10
        }
        },
        vAxis: {
          title: 'Weight',
          gridlines: {
            count: 10
        }
        },
      chartArea: {top:40, width: "70%", height: "75%"},
      animation:{
        duration: 1000,
        easing: 'out',
        startup: true,
      },
      legend: { position: 'none' },
      pointSize: 5
    };

   myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));

    myLineChart.draw(chartData, options);

}

function drawchart2(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
if (status !== google.maps.ElevationStatus.OK) {
 // Show the error code inside the chartDiv.
 chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
    status;
    return;
}

var chart = new google.visualization.ColumnChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < elevations.length; i++) {
data.addRow(['', elevations[i].elevation]);
}


chart.draw(data, {
  height: 200,
  legend: 'none',
  titleY: 'Elevation (m)'
 });

}

Answer 1

您所拥有的代码看起来应该可以工作...
将需要查看在哪里drawchart2 ，HTML元素以及其他任何代码，以确保...

在此示例中，我添加了回调函数drawcharts以开始绘制...

 google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawcharts}); function drawcharts() { drawchart(); drawchart2(); } function drawchart() { var chartData = new google.visualization.DataTable(); chartData.addColumn('number', 'Arm'); chartData.addColumn('number', 'Weight'); for (var i = 0; i < 10; i++) { chartData.addRow([ parseFloat(i), parseFloat(i * 1.5) ]); }; var options = { height: 500, hAxis: { title: 'Arm C.G', gridlines: { count: 10 } }, vAxis: { title: 'Weight', gridlines: { count: 10 } }, chartArea: {top:40, width: "70%", height: "75%"}, animation:{ duration: 1000, easing: 'out', startup: true, }, legend: {position: 'none'}, pointSize: 5 }; myLineChart = new google.visualization.LineChart(document.getElementById('chart1')); myLineChart.draw(chartData, options); } function drawchart2(elevations, status) { var chartDiv = document.getElementById('elevation_chart'); var chart = new google.visualization.ColumnChart(chartDiv); var data = new google.visualization.DataTable(); data.addColumn('string', 'Sample'); data.addColumn('number', 'Elevation'); for (var i = 0; i < 10; i++) { data.addRow([ '', i * 100 ]); } chart.draw(data, { height: 200, legend: 'none', titleY: 'Elevation (m)' }); } 

 <script src="https://www.google.com/jsapi"></script> <div id="chart1"></div> <div id="elevation_chart"></div>