Question

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

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>

Answer 1

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

arrayToDataTable（）

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

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

缺点：
您无法明确指定每列的数据类型;该类型是从传入的数据推断出来的。
您不能在数据中使用任何日期或时间值。

Answer 2

尝试使用：

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

Answer 3

你可能搞乱了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>

Answer 4

arrayToDataTable现在支持日期值（不确定大约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);

请记住，当您调用新日期（...）时会应用当前时区，也许您想进行更多调整。

Google图表 - 日期类型

4 个答案:

arrayToDataTable（）