尝尝用 Google AJAX API 做图表

作者:vkvi 来源:ITPOW(原创) 日期:2009-9-2

Google 产品很多,其中有一项服务是 Google 代码。

Google 代码下有很多产品,其中一项产品就是 AJAX APIs。

AJAX APIs 下也有很多东西,其中一项东西就是 Google 可视化 API。

Google 可视化 API,其实就是帮助我们用几句简单的 JavaScript、HTML 等代码,实现复杂的饼图、结构图、表等功能。

visualization.png

下面用官方的示例代码看一个示例

http://code.google.com/intl/zh-CN/apis/visualization/documentation/using_overview.html

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['piechart']});

// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
        ]);
    
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>

效果

Google 可视化 API 应用示例

实际运行一下


[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]
相关文章