数据可视化实战-使用GoogleCharts设计交互式图表.docxVIP

数据可视化实战-使用Google Charts设计交互式图表v1.0陈敏刚 2016.7.13Google Charts简介Google Charts tools是为浏览器与移动设备定制的交互式图表开发包。Google Charts tools 功能强大，容易使用，而且是免费的，用于在Web上可视化数据。Google Charts tools 提供了从简单的折线图到复杂的层次化的树结构、地图等图表类型。参考：/chart/Google Charts快速实战（Quick Start）使用Google Charts最通用的方法是在你的Web页面上嵌入JavaScript，具体步骤和代码如下：加载Google 图表库（You load some Google Chart libraries）script type=text/javascript src=/charts/loader.js/script// Load the Visualization API and the corechart package. google.charts.load(current, {packages:[corechart]}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart);列出需要被展示的数据（List the data to be charted）// Create the data table. var data = new google.visualization.DataTable(); data.addColumn(string, Topping); data.addColumn(number, Slices); data.addRows([ [Mushrooms, 3], [Onions, 1], [Olives, 1], [Zucchini, 1], [Pepperoni, 2] ]);选择并定制图表（select options to customize your chart）// Set chart options var options = {title:How Much Pizza I Ate Last Night,?width:400,?height:300}; // Instantiate and draw our chart, passing in some options.?var chart = new google.visualization.PieChart(document.getElementById(chart_div)); chart.draw(data, options); }使用一个ID来创建图表对象（Finally create a chart object with an id that you choose） !--Div that will hold the pie chart--?div id=chart_div/div在Web页面中创建一个div，该div的ID为上面的ID，在这个div中展示图表来可视化数据。（Then, later in the web page, you create a div with that id to display the Google Chart.）// Instantiate and draw our chart, passing in some options.var chart = new google.visualization.PieChart(document.getElementById(chart_div));chart.draw(data, options);【完整代码】html head !--Load the AJAX API-- script type=text/javascript src=/charts/loader.js/script script type=text/javascript // Load the Visualization API and the corechart package. google.charts.load(current, {packages:[corechart]}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Call