构建可搜索的基于Web的Google图表

在Poynter看到的关于Google Chart Tools的介绍 How to make searchable, Web-based Google charts。参考该文章，也试用了下Google Chart Tools。

　　大量的数据可视化需要有专业的知识或者需要话费大量时间精力以及资源，而google的The Google Visualization API（web）使得此工作变得简单，不管你是designer, developer, Web producer 还是hobbyist。

　　废话不多说，直接上例子，为了体验实验，我自己构造了例子，而没有采用原文的实例。

1. 首先打开Google Visualization API homepage，选择Bar Chart。



2. 在下面的图中，点击Google Visualization API playground的字样。



3. 然后打开一个新的页面，左侧为API或者code的列表，右侧为当前API或者code的代码，而下面为对应的bar chart，修改code，点击 run code，bar chart会有相应的变化。



4. 原始的代码如下 [javascript]function drawVisualization() {
   // Create and populate the data table.
   var data = new google.visualization.DataTable();
   var raw_data = [['Austria', 1336060, 1538156, 1576579, 1600652, 1968113, 1901067],
   ['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
   ['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
   ['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]];
   
   var years = [2003, 2004, 2005, 2006, 2007, 2008];
   
   data.addColumn('string', 'Year');
   for (var i = 0; i < raw_data.length; ++i) {
   data.addColumn('number', raw_data[i][0]);
   }
   
   data.addRows(years.length);
   
   for (var j = 0; j < years.length; ++j) {
   data.setValue(j, 0, years[j].toString());
   }
   for (var i = 0; i < raw_data.length; ++i) {
   for (var j = 1; j < raw_data[i].length; ++j) {
   data.setValue(j-1, i+1, raw_data[i][j]);
   }
   }
   
   // Create and draw the visualization.
   new google.visualization.BarChart(document.getElementById('visualization')).
   draw(data,
   {title:"Yearly Coffee Consumption by Country",
   width:600, height:400,
   vAxis: {title: "Year"},
   hAxis: {title: "Cups"}}
   );
   }[/javascript]



5. 通常情况下，需要修改这几个参数即可。
   
   
   
   1. 第4行var raw_data的内容
   
   
   2. 第9行var years的内容
   
   
   3. 第11行和第32行对应的Y轴的坐标名称
   
   
   4. 第33行的X轴的坐标名称
   
   
   5. 第30行的chart的名称
   
   
   6. 其他详细参数设置可以参考文档的Configuration Options部分
   
   
   
   



6. 我的修改之后的代码和charts分别如下所示：[javascript]function drawVisualization() {
   // Create and populate the data table.
   var data = new google.visualization.DataTable();
   var raw_data = [['econsh', 40000, 55381],
   ['mushi', 20000, 43816],
   ['wods', 30000, 5816]];
   
   var years =['article num', 'time'];
   
   data.addColumn('string', 'properties');
   for (var i = 0; i < raw_data.length; ++i) {
   data.addColumn('number', raw_data[i][0]);
   }
   
   data.addRows(years.length);
   
   for (var j = 0; j < years.length; ++j) {
   data.setValue(j, 0, years[j].toString());
   }
   for (var i = 0; i < raw_data.length; ++i) {
   for (var j = 1; j < raw_data[i].length; ++j) {
   data.setValue(j-1, i+1, raw_data[i][j]);
   }
   }
   
   // Create and draw the visualization.
   new google.visualization.BarChart(document.getElementById('visualization')).
   draw(data,
   {title:"SBBSert statictics",
   width:600, height:400,
   vAxis: {title: "properties"},
   hAxis: {title: "nums"}}
   );
   }[/javascript]


对应图片如下

注意：这个bar chart貌似不支持中文，有了中文的话，就不能正常工作，已经反馈给google