Question

我正在尝试在一个图表上显示不同的数据集。此图表是通过Google图表API制作的。通过测试，我遇到了图表不能在chrome上运行但在Edge和Firefox等其他浏览器上运行的问题。这是我的代码：

<head>
  <meta charset="ISO-8859-1">
  <title> tea and coffee</title>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
      // Some raw data (not necessarily accurate)
      var rowData1 = [
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
          'Rwanda', 'Average'
        ],
        ['2004/05', 165, 938, 522, 998, 450, 114.6],
        ['2005/06', 135, 1120, 599, 1268, 288, 382],
        ['2006/07', 157, 1167, 587, 807, 397, 623],
        ['2007/08', 139, 1110, 615, 968, 215, 409.4],
        ['2008/09', 136, 691, 629, 1026, 366, 569.6]
      ];

      var rowData2 = [
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
          'Rwanda', 'Average'
        ],
        ['2004/05', 122, 638, 722, 998, 450, 614.6],
        ['2005/06', 100, 1120, 899, 1268, 288, 682],
        ['2006/07', 183, 167, 487, 207, 397, 623],
        ['2007/08', 200, 510, 315, 1068, 215, 609.4],
        ['2008/09', 123, 491, 829, 826, 366, 569.6]
      ];

      // Create and populate the data tables.
      var data = [];
      data[0] = google.visualization.arrayToDataTable(rowData1);
      data[1] = google.visualization.arrayToDataTable(rowData2);

      var options = {
        width: 600,
        height: 350,
        vAxis: {
          title: "Cups"
        },
        hAxis: {
          title: "Month"
        },
        seriesType: "bars",
        series: {
          5: {
            type: "line"
          }
        },
        animation: {
          startup: true,
          duration: 1000,
          easing: 'out'
        },
      };
      var current = 0;
      // Create and draw the visualization.
      var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
      var button = document.getElementById('b1');
      var button2 = document.getElementById('b2');

      function drawChart() {
        // Disabling the button while the chart is drawing.
        button.disabled = true;
        button2.disabled = true;
        google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button2.disabled = false;
            button.value = 'Switch to' + current;
            button2.value = 'Switch to' + current;
          });
        options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
        chart.draw(data[current], options);
      }
      drawChart();

      buttonChange = function() {
        current = 0;
        drawChart();
      }

      button2Change = function() {
        current = 1;
        drawChart();
      }
    }
  </script>
</head>

<body>
  <select>
    <option id='b1' onclick="buttonChange()" value="Tea">Tea</option>
    <option id='b2' onclick="button2Change()" value="Coffee">Coffee</option>
  </select>
  <div id="visualization" style="width: 900px; height: 500px;"></div>
  <script type="text/javascript">
    function buttonChange() {
      current = 0;
      drawChart();
    }
    function button2Change() {
      current = 1;
      drawChart();
    }
  </script>
</body>

如您所见，我刚刚结合了API中的一些代码段。所以包含的数据只是一个占位符。我已经尝试停用所有Chrome扩展程序，检查了不正常的选项，并在另一台PC上试用过。在每个浏览器上它工作正常。我希望有人可以帮助我。

Google动画图表不适用于Chrome

0 个答案: