使用谷歌图表
Google Charts 提供了一种完美的方式来可视化您网站上的数据。从简单的折线图到复杂的分层树图， 图表库 提供了大量即用型图表类型。
使用 Google Charts 的最常见方法是使用嵌入在网页中的简单 JavaScript。您加载一些 Google Chart 库，列出要绘制图表的数据，选择自定义图表的选项，最后使用您选择的id创建一个图表对象。然后，稍后在网页中，您 使用该ID创建一个<div>以显示 Google 图表。
图表作为 JavaScript 类公开，Google Charts 提供了 许多图表类型供您使用。默认外观通常就是您所需要的，您始终可以 自定义图表 以适合您网站的外观。图表具有高度交互性并公开 事件，让您可以将它们连接起来以创建复杂的 仪表板或与您的网页集成的其他体验 . 图表使用 HTML5/SVG 技术呈现，以提供跨浏览器兼容性（包括用于旧 IE 版本的 VML）和跨平台移植到 iPhone、iPad 和 Android。您的用户永远不必弄乱插件或任何软件。如果他们有网络浏览器，他们就可以看到您的图表。
所有图表类型都使用DataTable类填充数据 ，从而在您尝试找到理想外观时轻松地在图表类型之间切换。DataTable 提供排序、修改和过滤数据的方法，并且可以直接从您的网页、数据库或任何支持图表工具数据源协议的数据提供者填充 。（该协议包括类似 SQL 的查询语言，由 Google Spreadsheets、Google Fusion Tables 和第三方数据提供商（如 SalesForce）实现。您甚至可以在自己的网站上实现该协议并成为其他服务的数据提供商。）
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/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); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // 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] ]); // 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); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
图怎么样了？
通过更换饼图转换为条形图google.visualization.PieChart与google.visualization.BarChart代码并重新加载浏览器。您可能会注意到“切片”图例被截断了。要解决此问题，width请将 400更改为 500，保存文件，然后重新加载浏览器。
