javascript - 一页上有两个不同的谷歌图表

Question

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

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>