Question

我正在尝试在页面上加载三个不同的谷歌图表，一个仪表，一个行和一个条形图。但是当我尝试实现第三张图表时，某些事情就失败了。有时，仪表图和折线图加载但不加载条形图，有时只加载仪表和条形图。我不能让所有三个同时加载。我能帮忙吗？

这是我的代码：

＆＃13;

<html>

<head>
  <title>Usage statistic</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart", "gauge", "line", "bar"],
      'language': 'no'
    });
    google.setOnLoadCallback(init);

    function init() {
      drawLine();
      drawBar();
      drawGauge();


    }

    function drawGauge() {

      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Month', 73.6],
        ['Today', 62.7],
        ['Week', 73.6],
      ]);

      var options = {
        width: 800,
        height: 240,
        greenFrom: 40,
        greenTo: 100,
        redFrom: 0,
        redTo: 20,
        yellowFrom: 20,
        yellowTo: 40,
        minorTicks: 5
      };

      var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
      chart.draw(data, options);
    }

    function drawLine() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Logins');

      data.addRows([

        [new Date(2015, 10, 16), 1971],
        [new Date(2015, 10, 17), 1973],
        [new Date(2015, 10, 18), 1964],
        [new Date(2015, 10, 19), 1981],
        [new Date(2015, 10, 20), 1919],
        [new Date(2015, 10, 21), 1185],
        [new Date(2015, 10, 22), 1104],
        [new Date(2015, 10, 23), 2009],
        [new Date(2015, 10, 24), 1955],
        [new Date(2015, 10, 25), 1933],
        [new Date(2015, 10, 26), 1923],
        [new Date(2015, 10, 27), 1854],
        [new Date(2015, 10, 28), 1159],
        [new Date(2015, 10, 29), 1107],
        [new Date(2015, 10, 30), 2006],
        [new Date(2015, 11, 01), 1998],
        [new Date(2015, 11, 02), 1951],
        [new Date(2015, 11, 03), 1921],
        [new Date(2015, 11, 04), 1870],
        [new Date(2015, 11, 05), 1174],
        [new Date(2015, 11, 06), 1128],
        [new Date(2015, 11, 07), 2030],
        [new Date(2015, 11, 08), 1912],
        [new Date(2015, 11, 09), 1956],
        [new Date(2015, 11, 10), 1942],
        [new Date(2015, 11, 11), 1895],
        [new Date(2015, 11, 12), 1168],
        [new Date(2015, 11, 13), 1148],
        [new Date(2015, 11, 14), 2004],
        [new Date(2015, 11, 15), 1954],
      ]);

      var options = {
        title: 'Logins',
        width: 800,
        height: 400,
        hAxis: {
          format: 'MMM d, y',
          gridlines: {
            count: 15
          }
        },
        vAxis: {
          gridlines: {
            color: 'none'
          },
          minValue: 0
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_div'));
      chart.draw(data, options);
    }

    function drawBar() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [
          [8, 30, 45], 5
        ],
        [
          [9, 0, 0], 10
        ],
        [
          [10, 0, 0, 0], 12
        ],
        [
          [10, 45, 0, 0], 13
        ],
        [
          [11, 0, 0, 0], 15
        ],
        [
          [12, 15, 45, 0], 20
        ],
        [
          [13, 0, 0, 0], 22
        ],
        [
          [14, 30, 0, 0], 25
        ],
        [
          [15, 12, 0, 0], 30
        ],
        [
          [16, 45, 0], 32
        ],
        [
          [16, 59, 0], 42
        ]
      ]);

      var options = google.charts.Bar.convertOptions({
        title: 'Total Emails Received Throughout the Day',
        width: 800,
        height: 400
      });

      var chart = new google.charts.Bar(document.getElementById('bar_div'));
      chart.draw(data, options);
    }
  </script>

  <style>
    .menu {
      border-radius: 5px;
      border: 1px solid black;
      float: left;
      padding: 0px 6px;
      margin-right: 6px;
      color: #686868;
    }
    .menu a {
      text-decoration: none;
      color: #686868;
    }
    .active a {
      color: black !important;
    }
  </style>
</head>

<body style="background-color: #F0F0F0; margin: 20px;">
  <div>
    <h2>Logins in percentages</h2>
  </div>
  <div id="gauge_div"></div>
  <div>
    <h2>Logins last 30 days</h2>
  </div>
  <div id="line_div"></div>
  <div>
    <h2>Emails Received</h2>
  </div>
  <div id="bar_div"></div>

</body>

</html>

＆＃13;

Answer 1

我无法真正回答原因，但是如果您查看加载库link的文档，您会发现它们已经更新了它的完成方式。而且它与以前完全不同。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
  packages: ["corechart", "gauge", "line", "bar"],
  'language': 'no'
});
google.setOnLoadCallback(init);

必须更改为

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages: ["corechart", "gauge", "line", "bar"]});
  google.charts.setOnLoadCallback(init);
  ....
</script>

看起来一切都在我的应用程序中运行，具有旧的加载样式，但尝试使用旧样式的场景完全不起作用。将其更改为新可以使用。

Jsfiddle

编辑：

如果有人有兴趣，我发现了为什么我的东西在起作用。我只使用Wrappers，显然你应该使用google.load（旧的方式）而不是新的google.charts.load。

Source

加载第三个谷歌图表时出现问题

1 个答案: