Question

我在同一个.html页面上有两个条形图，但第一个图表覆盖了第二个。只显示1张图表。我不想使用iFrames，我已经使函数/变量独一无二。我还缺少什么？

 <script type="text/javascript">   
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawCycleStatusChart);

function drawCycleStatusChart() {
 var jsonCycleData = $.ajax({
      url: "cycleStatus.php",
      dataType: "json",
      async: false
      }).responseText;
 var jsonCycleObj = eval(jsonCycleData);
    console.log(typeof jsonCycleData);

  // Create our data table out of JSON data loaded from server.
  var dataCycle = new google.visualization.arrayToDataTable(jsonCycleObj);

  var optionsCycle = { 
    //isStacked: 'percent',
    orientation: 'horizontal',
    height: 600,
    chartArea: {height: 500},
    width: '100%',
    fontName: 'Arial',
    fontSize: 15,
    annotations: {
      textStyle: {fontSize: 10, fontName: 'Calibri'}
    },
    legend: {position: 'top', maxLines: 4},
    hAxis: {
      minValue: 0,
      //title: 'Web UI Release Night Test Cycles in Production',
      //titleTextStyle: {fontSize: 25, bold: true},
      textStyle: {fontSize: 15, bold: false}
      }
    };

  // Instantiate and draw our chart, passing in some options.
  var chartCycle = new google.visualization.ColumnChart(document.getElementById('cycle_status'));
  chartCycle.draw(dataCycle, optionsCycle);
  }

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
 var jsonData = $.ajax({
      url: "executionStatus.php",
      dataType: "json",
      async: false
      }).responseText;
 var jsonObj = eval(jsonData);
    console.log(typeof jsonData);

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.arrayToDataTable(jsonObj);

  var options = { 
    isStacked: 'percent',
    orientation: 'horizontal',
    height: 600,
    chartArea: {height: 300},
    //width: '100%',
    fontName: 'Arial',
    fontSize: 15,
    annotations: {
      textStyle: {fontSize: 10, fontName: 'Calibri'}
    },
    legend: {position: 'top', maxLines: 4},
    hAxis: {
      minValue: 0,
      //title: 'Web UI Release Night Test Cycles in Production',
      //titleTextStyle: {fontSize: 25, bold: true},
      textStyle: {fontSize: 15, bold: false}
      }
    };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.ColumnChart(document.getElementById('stacked_bar'));
  chart.draw(data, options);
  }

</script>

<div id="cycle_status"</div>
<div id="stacked_bar"></div>

Answer 1

<div id="cycle_status"></div>

缺少结束＆gt;标签

包含不同数据集的多个Google图表

1 个答案: