Javascript 基于googlefusion表的图形可视化_Javascript_Google Maps Api 3_Dom Events_Google Fusion Tables

Javascript 基于googlefusion表的图形可视化

javascript google-maps-api-3

Javascript 基于googlefusion表的图形可视化,javascript,google-maps-api-3,dom-events,google-fusion-tables,Javascript,Google Maps Api 3,Dom Events,Google Fusion Tables,我试图通过点击融合表图层/地图来动态绘制图表。无论何时单击墨西哥的某个州，我都希望图表能够更改以反映2007、2008、2009和2010列中的值。目前，这是行不通的。Firebug告诉我‘a是未定义的’，但我真的不知道这是什么意思，因为我没有声明一个名为‘a’的变量，我假设它是Google脚本中的某个东西这是我正在使用的代码。单击侦听器从名为“column_1”的列中获取状态名称，然后将其传递给绘图可视化功能： google.maps.event.addListener(shownLayer

我试图通过点击融合表图层/地图来动态绘制图表。无论何时单击墨西哥的某个州，我都希望图表能够更改以反映2007、2008、2009和2010列中的值。目前，这是行不通的。Firebug告诉我‘a是未定义的’，但我真的不知道这是什么意思，因为我没有声明一个名为‘a’的变量，我假设它是Google脚本中的某个东西

这是我正在使用的代码。单击侦听器从名为“column_1”的列中获取状态名称，然后将其传递给绘图可视化功能：

google.maps.event.addListener(shownLayer, 'click',function(e){
    stateName = e.row['column_1'].value;
    drawVisualization(stateName);           
});  


function drawVisualization(stateName){
    google.visualization.drawChart({
        containerID: "textBox",
        dataSourceUrl: "http://www.google.com/fusiontables/gvizdata?tq=",

        query: "SELECT '2007','2008','2009','2010' " +
          "FROM 3943497 WHERE column_1 = '" + stateName + "'",
        chartType: "ColumnChart",
        options: {
            title: stateName,
            height: 300,
            width: 400
        }
    }); 

}

地图网站位于以下位置：

这是错的。应该是：

containerId: "textBox",

我的建议是先让一个基本的静态GVis图表工作，然后再考虑将其链接到Fusion表，并基于鼠标点击更改图表。我接受了你剧本的相关部分，但没能让它发挥作用。当您发布整个文件时，很难将给您带来问题的问题与代码的其余部分分开。这是我用来测试GViz基本问题的摘录：

<!DOCTYPE html>
   <html>
   <head>
   <script src="http://www.google.com/jsapi"></script>
  <script type='text/javascript'>
   google.load('visualization','1', {packages: ['corechart'] });
    window.onload = function () {
       drawVisualization('Chiapas');
    }
   function drawVisualization(stateName){
       google.visualization.drawChart({
           "chartType": "ColumnChart",
           "containerId": "textBox",
           "dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=",
           "query": "SELECT '2007','2008','2009','2010' " + "FROM 3943497 WHERE column_1 = '" + stateName + "'",
           "options": {
               title: stateName
           }
       });
   }

   </script>
   </head>
   <body>
     <div id="textBox" style="width: 400px; height: 300px;"></div>
     <br />
   </body>
   </html>


load（'visualization'，'1'，{packages:['corechart']}）；
window.onload=函数（）{
（Chiapas）；
}
函数drawVisualization（stateName）{
google.visualization.drawChart({
“chartType”：“ColumnChart”，
“集装箱ID”：“文本框”，
“数据源URL”：http://www.google.com/fusiontables/gvizdata?tq=",
“查询”：“从3943497中选择‘2007’、‘2008’、‘2009’、‘2010’+”，其中列_1=“+stateName+”，
“选择”：{
标题：州名
}
});
}

此应用程序不工作。我将显示在页面中： “不支持具有值域轴的条形图系列”

我还可以在你的应用程序中看到，你正在使用的stateName值是“Chiapas，Mexico”，但这不是你的Fusion Table列中显示的值。\u 1，“Chiapas”是其中的一个值。

我对google.visualization不太熟悉，但我首先要得到一个静态图表显示，然后，担心点击后更改图表。我已经这样做了，并且了解如何做到这一点。我认为问题在于从融合表中获取数据。谢谢！但解决这个问题仍然无法生成图表。我认为使用两种形式的Maps API javascript会有问题。您可以删除一个并使用：google.load（“maps”，“3”，“other_params:“sensor=false”}）；我知道你可以在同一个javascript中使用地图和图表。请查看google提供的示例：

<!DOCTYPE html>
   <html>
   <head>
   <script src="http://www.google.com/jsapi"></script>
  <script type='text/javascript'>
   google.load('visualization','1', {packages: ['corechart'] });
    window.onload = function () {
       drawVisualization('Chiapas');
    }
   function drawVisualization(stateName){
       google.visualization.drawChart({
           "chartType": "ColumnChart",
           "containerId": "textBox",
           "dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=",
           "query": "SELECT '2007','2008','2009','2010' " + "FROM 3943497 WHERE column_1 = '" + stateName + "'",
           "options": {
               title: stateName
           }
       });
   }

   </script>
   </head>
   <body>
     <div id="textBox" style="width: 400px; height: 300px;"></div>
     <br />
   </body>
   </html>