google-visualization谷歌可视化入门


备注

Google Visualization提供了一个灵活的基于javascript的框架,用于创建可嵌入网页的各种交互式图表。这些图表类型包括:

使用Google Visualization创建的图表可以使用来自各种来源的数据,包括JSON,Google Spreadsheets以及使用Javascript编写的硬编码数组。

Google Visualization API还允许您过滤数据,以及将多个图表链接到单个数据源,以创建显示相同数据的多个维度的交互式仪表板。

版本

选择此版本的语法发布日期
当前 google.charts.load('current', {packages: ['corechart']}); 2016年2月23日
44 google.charts.load('44', {packages: ['corechart']}); 2016年2月23日
43 google.charts.load('43', {packages: ['corechart']}); 2015年10月2日
42 google.charts.load('42', {packages: ['corechart']}); 2015年4月30日
41 google.charts.load('41', {packages: ['corechart']}); 2015年2月23日

这里有过去版本的完整列表。

加载和运行

谷歌目前有两种加载谷歌可视化(又名谷歌图表), gstatic加载器https://www.gstatic.com/charts/loader.js )和jsapihttps://www.google.com/jsapi )的JS库的方法https://www.google.com/jsapi )。

建议使用gstatic加载器,因为Google正在从jsapi过渡到gstatic加载器。 请参阅转换参考

在任何一种情况下,您必须首先包含一个带有script 标记的加载器,通常位于文档的head ,如下所示:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 

将加载程序包含在网页中后,可以通过调用load 函数将其用于加载所需的库包。

对于Loader.js

google.charts.load('current', {packages: ['corechart']});
 

对于JSAPI

google.load('visualization', '1', {'packages':['corechart']});
 

但是在加载库包之后,必须等待它们完成加载才能继续使用它们。等待的方法是通过调用setOnLoadCallback 函数来设置回调。

示例代码(用于gstatic加载器):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>
 

HTML:

<div id="gender_chart"></div>
 

的jsfiddle