个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 15:18:00 25 4
gpt4 key购买 nike

我正在尝试在页面上加载三种不同的谷歌图表，一种仪表，一种折线图和一种条形图。但是当我尝试实现第三个图表时，出现了一些问题。有时会加载仪表图和折线图，但不加载条形图，有时仅加载仪表图和条形图。我无法同时加载所有三个。我可以寻求帮助吗？

这是我的代码:

<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>

最佳答案

我无法真正回答为什么，但是如果您查看加载库的文档 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

关于javascript - 加载第三个谷歌图表时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34309906/

25 4 0
文章推荐： javascript - 无法使用 ASP.NET 获取输入值
文章推荐： javascript - 如何抓取有事件的链接内的数据？
文章推荐： javascript - 为什么 .clearRect 函数无法正常工作？
文章推荐： javascript - Twitter Nodejs 查询出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com