使用 Google Fusion 表格绘制图表可视化答案

【问题标题】：Drawing chart visualization with Google Fusion tables使用 Google Fusion 表格绘制图表可视化
【发布时间】：2012-06-08 18:18:04
【问题描述】：

我正在尝试通过单击融合表图层/地图来动态绘制图表。每当单击墨西哥的一个州时，我希望图表更改以反映 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
        }
    }); 

}

地图网站位于：https://mywebspace.wisc.edu/csterling/web/cartel%20map/index.html

【问题讨论】：

我不熟悉 google.visualization，但我至少会先显示一个静态图表，然后担心点击时更改图表。
我已经做到了，并且了解如何做到这一点。我认为问题在于从融合表中获取数据。

标签： javascript google-maps-api-3 dom-events google-fusion-tables

【解决方案1】：

containerID: "textBox",

拼写错误。应该是：

containerId: "textBox",

我的建议是先让一个基本的静态 GVis 图表工作，然后再担心将其链接到 Fusion Tables 并根据鼠标点击更改图表。我采用了您脚本的相关部分，但无法使其正常工作。当您发布整个文件时，很难将给您带来问题的问题与其他代码区分开来。这是我提取来测试基本 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>

此应用程序不工作。我正在页面中显示： "不支持带值域轴的条形系列"

我还可以在您的应用中看到您使用的 stateName 值是“墨西哥恰帕斯州”，但这不是 Fusion Table column_1 中显示的值，“恰帕斯州”是那里的值。

【讨论】：

谢谢！但修复它仍然不会生成图表。
我认为您使用两种形式的 Maps API javascript 存在问题。您可以删除一个并使用： google.load("maps", "3", {other_params:"sensor=false"});
我知道您可以在同一个 javascript 中同时使用地图和图表。通过 google 查看此示例：developers.google.com/fusiontables/docs/samples/…