个人中心
gpt4 book ai didi

javascript - ChartWrapper 未显示图表

转载 作者：太空宇宙 更新时间：2023-11-04 15:29:46 24 4
gpt4 key购买 nike

我正在使用 google-chart-api 使用 ChartWrapper 类和 ControlWrapper 类绘制图表。这是我一直在使用的代码。

这是加载硬编码数据的函数。

   function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
      ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
      ['Monthly', '1', 200, 20],
      ['Monthly', '2', 300, 30],
      ['Weekly', '1', 150, 15],
      ['Weekly', '3', 35, 3],
      ['Daily', '1', 230, 23],
      ['Daily', '2', 178, 17],

    ]);

这是我的 ControlWrapper。

     var timelinePicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control',
      'options': {
        'filterColumnLabel': 'Timeline',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
    });

这是我的 ChartWrapper。

        var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart',
        'options': {
          'width': 900,
          'height': 500,
          'chartArea': {top: 0, right: 0, bottom: 0}
        },

        'view': {'columns': [1, 2]}
      });

   new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
    google.setOnLoadCallback(drawVisualization);

并查看图表，

  <body>
  <div id="chart">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

但是，我仍然没有得到任何输出。知道这里出了什么问题吗？

最佳答案

强烈建议:始终尝试先调试自己的代码。那里有太多粗心的错误，如果您使用 Firebug 或类似工具来捕获错误，很容易被捕获。

错误 #1:仪表板 -> 仪表板

错误:new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

右:新的 google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`

错误 #2:时间线 -> 时间线

错误:'filterColumnLabel': 'Timeline',

右:'filterColumnLabel': 'TimeLine',

错误 #3:图表 -> 仪表板

错误:new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

右:new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);

同时更正 HTML(您有两个带有“图表”ID 的 div):

  <body>
  <div id="dashboard">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

最终工作版本

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
          ['Monthly', '1', 200, 20],
          ['Monthly', '2', 300, 30],
          ['Weekly', '1', 150, 15],
          ['Weekly', '3', 35, 3],
          ['Daily', '1', 230, 23],
          ['Daily', '2', 178, 17],  
        ]);

        var timelinePicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control',
          'options': {
            'filterColumnLabel': 'TimeLine',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart',
          'options': {
            'width': 900,
            'height': 500,
            'chartArea': {top: 0, right: 0, bottom: 0}
          },

          'view': {'columns': [1, 2]}
        });

        new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

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

24 4 0
文章推荐： javascript - 如何在Nuxt js国际化(i18n)示例解释中触发语言？
文章推荐： c++ - cpp静态对象实例化
文章推荐： javascript - 如何在 AngularJs 中将参数从 Controller 传递到服务
文章推荐： c++ - 每次需要编译 C++ 程序时，是否都需要键入 -std=c++17(或我想使用的任何标准)？
太空宇宙
个人简介

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

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