个人中心
gpt4 book ai didi

javascript - 显示 Google 图表的问题

转载 作者：行者123 更新时间：2023-12-03 06:29:37 25 4
gpt4 key购买 nike

这是我探索谷歌图表的第一天，但​​它没有显示折线图。它实际上没有显示任何内容。

这是我的代码:

<html>

<head>
  <style>
    <%@ include file="demoGraph.css"%>
  </style>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['line']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Months');
      data.addColumn('number', 'Enrolled');
      data.addColumn('number', 'Inactive');
      data.addColumn('number', 'Guest');

      data.addRows([
        [Jan, 700, 1200, 800],
        [Feb, 1000, 275, 1800],
        [Mar, 1250, 220, 1500],
        [Apr, 1100, 400, 600],
        [May, 1900, 250, 1200],
        [Jun, 2000, 360, 1000],
        [Jul, 1500, 500, 1000],
        [Aug, 1300, 250, 1000],
        [Sep, 1700, 500, 1000],
        [Oct, 1200, 150, 525],
        [Nov, 1000, 250, 625],
        [Dec, 1920, 280, 700]
      ]);

      var options = {
        title: 'Demo Graph',
        curveType: 'function',
        legend: {
          position: 'bottom'
        }
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>

</html>

但是在网页上它没有显示任何内容。根据他们的说法，它应该显示图表，但事实并非如此。有人能指出我缺少什么吗？

最佳答案

这是一个工作示例。

  1. 在您的代码中，月份(一月、二月、..)需要用 " 括起来，否则它将被视为未定义的变量，并且将抛出错误。
  2. 列(月)的数据类型应为字符串。将 data.addColumn('number', 'Months'); 更改为 data.addColumn('string', 'Months');

<html>

<head>
  <style>
    <%@ include file="demoGraph.css"%>
  </style>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Months');
      data.addColumn('number', 'Enrolled');
      data.addColumn('number', 'Inactive');
      data.addColumn('number', 'Guest');

      data.addRows([
        ["Jan", 700, 1200, 800],
        ["Feb", 1000, 275, 1800],
        ["Mar", 1250, 220, 1500],
        ["Apr", 1100, 400, 600],
        ["May", 1900, 250, 1200],
        ["Jun", 2000, 360, 1000],
        ["Jul", 1500, 500, 1000],
        ["Aug", 1300, 250, 1000],
        ["Sep", 1700, 500, 1000],
        ["Oct", 1200, 150, 525],
        ["Nov", 1000, 250, 625],
        ["Dec", 1920, 280, 700]
      ]);

      var options = {
        title: 'Demo Graph',
        curveType: 'function',
        legend: {
          position: 'bottom'
        }
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>

</html>

关于javascript - 显示 Google 图表的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38497327/

25 4 0
文章推荐： android - Activity_main.xml 未显示且 Gradle 未完成初始构建
文章推荐： haskell - 如何在 Haskell 中持久保存大数据以进行高效反序列化
文章推荐： hyperlink - 在其他页面上查找YouTube链接
文章推荐： visual-studio - 强制解决方案资源管理器在 Visual Studio 2005 的编辑器中选择文件
行者123
个人简介

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

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