Fatal编程技术网

Google visualization 谷歌图表-日期类型

google-visualization

Google visualization 谷歌图表-日期类型,google-visualization,Google Visualization,我正在尝试测试Google图表，但收到以下错误： 一个或多个参与者未能绘制（）。 筛选器无法对字符串类型的列进行操作。列类型必须是以下类型之一：number、date、datetime或timeofday。列角色必须是域，并且与连续轴关联。 我做错了什么 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascri

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

一个或多个参与者未能绘制（）。
筛选器无法对字符串类型的列进行操作。列类型必须是以下类型之一：number、date、datetime或timeofday。列角色必须是域，并且与连续轴关联。

我做错了什么

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


load（'visualization'，'1.0'，{'packages'：['controls']}）；
setOnLoadCallback（drawDashboard）；
函数drawDashboard（）{
var obj=[“日期”，“买入”，“卖出”]，[“日期（2012,10,2）”，15,14]，“日期（2012,10,3）”，55,51]，“日期（2012,10,4）”，53,49]；
var dataa=google.visualization.arrayToDataTable（obj）；
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
var donutRangeSlider=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“containerId”：“filter_div”，
“选项”：{
“filterColumnIndex”：0，
“用户界面”：{
“图表类型”：“线条图”，
“图表选项”：{
'chartArea'：{'width'：'90%}，
'hAxis'：{'baselineColor'：'none'}
},
'chartView'：{'columns'：[0,1]}，
“minRangeSize”：86400000
}
},
});
var lineChart=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱船”：“海图分区”，
“选项”：{
标题：“标题”，
}
});
dashboard.bind（donutRangeSlider，lineChart）；
dashboard.draw（dataa）；
}
您可能把java脚本搞砸了，我从您的代码中提取了数据，并在中创建了示例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>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable（[“日期”，“买入”，“卖出”]，[“日期（2012,10,2）”，15,14]，“日期（2012,10,3）”，55,51]，“日期（2012,10,4）”，53,49]）；
//创建并绘制可视化。
新的google.visualization.LineChart（document.getElementById（'visualization'））。
绘制（数据，{curveType:“函数”，
宽：500，高：400，
变量：{maxValue:10}
);
}
setOnLoadCallback（drawVisualization）；
arrayToDataTable不支持此处提到的日期或时间值：

arrayToDataTable（）此帮助函数使用单个调用创建和填充数据表。

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

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

尝试使用以下方法：

 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]
    ]);
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图表将“Date（2012,10,2）”识别为字符串，但必须是数据类型。请在谷歌可视化API论坛上找到这个问题的答案