Question

这是我浏览谷歌图表的第一天，但它没有显示折线图。它实际上没有显示任何东西。

这是我的代码：

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

但是在网页上它没有显示任何内容。那么根据它们它应该显示图形，但它不是。有人能说出我错过的东西吗？

Answer 1

这是一个工作示例。

在您的代码中，月份（1月，2月，...）需要包含在"中，否则将被视为未定义的variable，并且会抛出错误。< / LI>
列（月）的数据类型应为string。将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>

Answer 2

如果需要，请包含查询

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

并将data.addColumn('number', 'Months');更改为data.addColumn('string', 'Months');

也改变了

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]
                ]);

到

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]
                ]);

这是HTML

<html>
    <head>
        <style>
            <%@ include file="demoGraph.css"%>
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <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>

Answer 3

在您的示例中，您没有定义月份变量。由于您将第一行定义为数字data.addColumn('number', 'Months');，因此它们需要采用数字格式。

例如：https://jsfiddle.net/56jekrec/1/

显示Google Charts的问题

3 个答案: