1

我正在尝试测试 Google Chart，但收到以下错误：

One or more participants failed to draw(). The filter cannot operate on a column of type string. Column type must be one of: number, date, datetime or timeofday. Column role must be domain, and correlate to a continuous axis.

我究竟做错了什么？

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

          google.load('visualization', '1.0', {'packages':['controls']});
          google.setOnLoadCallback(drawDashboard);

      function drawDashboard() {
    var obj = [["Date","buy","sell"],["Date(2012,10,2)",15,14],["Date(2012,10,3)",55,51],["Date(2012,10,4)",53,49]];
        var dataa = google.visualization.arrayToDataTable(obj);
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
              'filterColumnIndex': 0,
              'ui': {
                     'chartType': 'LineChart',
                     'chartOptions': {
                       'chartArea': {'width': '90%'},
                       'hAxis': {'baselineColor': 'none'}
                     },
                     'chartView': { 'columns': [0, 1] },
                     'minRangeSize': 86400000
                }
          },
        });

        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
                title: 'Title',
          }
        });

        dashboard.bind(donutRangeSlider, lineChart);
        dashboard.draw(dataa);
      }       
</script>
4

4 回答 4

1

arrayToDataTable 不支持此处提到的日期或时间值：https ://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable

数组到数据表（）

此辅助函数使用单个调用创建和填充 DataTable。

优点：
在浏览器中执行的代码非常简单易读。

缺点：
不能显式指定每一列的数据类型；类型是从传入的数据中推断出来的。
您不能在数据中使用任何日期或时间值。

于 2014-07-28T01:31:11.270 回答
1

尝试使用这个：

 var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'buy');
    data.addColumn('number', 'sell');
    data.addRows([
    [new Date(2012,10,2),15,14],
    [new Date(2012,10,3),55,51],
    [new Date(2012,10,4)",53,49]
    ]);
于 2015-06-22T05:48:05.453 回答
0

您可能搞砸了 java 脚本，我从您的代码中获取数据并在Google Code Playground中创建了示例 html 页面。

检查以下代码，它显示可视图表而没有任何错误：

<html>
  <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', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([["Date","buy","sell"],["Date(2012,10,2)",15,14],["Date(2012,10,3)",55,51],["Date(2012,10,4)",53,49]]);


        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('visualization')).
            draw(data, {curveType: "function",
                        width: 500, height: 400,
                        vAxis: {maxValue: 10}}
                );
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 500px; height: 400px;"></div>
  </body>
</html>
于 2012-11-27T10:57:44.940 回答
0

arrayToDataTable 现在确实支持 Date 值（不确定 3 年前）

在您的代码中，改为执行此操作

var obj = [[{label: "Date", type: "date"},"buy","sell"],[new Date(2012,10,2),15,14],[new Date(2012,10,3),55,51],[new Date(2012,10,4),53,49]];
var data = google.visualization.arrayToDataTable(obj);

请记住，当您调用 new Date(...) 时会应用当前时区，也许您想进行更多调整。

于 2017-04-22T11:08:49.050 回答