javascript - 上传后 Google 图表不起作用

标签 javascript jquery charts google-visualization

我正在尝试在 Firefox 中使用 Google 图表。当我从 Google 复制示例代码并将其保存到桌面上的 html 文件时,图表可以正常工作。如果我上传相同的 html 文件,图表将不起作用,并且我收到错误:ReferenceError:google 未定义。我创建了一个jsfiddle我正在使用的代码。

谁能告诉我为什么会发生这种情况以及如何解决这个问题?

<html>
  <head>
    <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(drawChart1);

      function drawChart1() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      9]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

最佳答案

而不是:

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      9]
        ]);

你应该让你的代码更清晰:

function drawChart() {


 // Define the chart to be drawn.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Element');
  data.addColumn('number', 'Percentage');
  data.addRows([
    [' string ', ' Element']

  ]);

  // Instantiate and draw the chart.
  var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
  chart.draw(data, null);

Google 图表库可以向您展示为什么这种方式更有效。 https://developers.google.com/chart/interactive/docs/basic_load_libs

关于javascript - 上传后 Google 图表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44072358/

相关文章:

excel - 如果标记填充设置为自动,如何获得散点图系列 MarkerBackgroundColor?

javascript - Chart js - 极坐标散点图

javascript - 在 Gatsby 中添加预加载器

javascript - 根据下拉列表的值隐藏和显示一行表 - jquery

jquery - 如果不添加空的 <ul> 标签,nav-tabs 将无法工作

javascript - 具有多个日期的谷歌图表

javascript - 如何将 etherpad 的 ace2editor 更改为其他内容?

javascript - Node.js + Express + MySQL 作为文档存储(结果)

c# - 非嵌入资源js文件可以访问资源文件(.resx)吗?

javascript - JSON、HTML : What is the time format as such called 2001-07-26T20:52:54Z?