在前端开发中，图表展示是非常常见的需求之一。而谷歌图表（Google Charts）是一套优秀的图表库，可以方便地生成各种类型的图表。本文将介绍如何在同一页上添加两个不同类型的谷歌图表。
步骤
步骤一：引入谷歌图表库
首先需要在 HTML 中引入谷歌图表库：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
步骤二：加载图表核心包
在页面加载完成后，需要使用 google.charts.load 方法来异步加载谷歌图表核心包，该方法接收一个对象作为参数，用来指定要加载的图表包和回调函数等信息。
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawCharts);其中 'packages': ['corechart'] 表示要加载核心图表包。而 drawCharts 是回调函数，用于在核心包加载完成后执行。
步骤三：创建图表数据
在回调函数中，需要创建两个不同类型的图表数据，这里分别以柱状图和折线图为例。
-- -------------------- ---- -------
-------- ------------ -
--- ----- - ---------------------------------------
-------- -------- ------------
-------- ----- -----
-------- ----- -----
-------- ---- ------
-------- ----- ----
---
--- ----- - ---------------------------------------
-------- ---------
-------- ------
-------- ------
-------- -----
-------- -----
---
-其中 arrayToDataTable 方法用于将二维数组转换为谷歌图表需要的数据格式。
步骤四：创建图表选项
在创建数据之后，需要为每个图表创建选项对象，该对象包含图表的样式、标题、坐标轴等信息。
-- -------------------- ---- -------
--- -------- - -
------ -------- -------------
---------- -----------
------- - --------- ------- -
--
--- -------- - -
------ ------ -------
---------- -------
------- - --------- ------- -
--可以根据需要，调整选项对象中的属性。
步骤五：创建图表实例
接下来需要使用 google.visualization 的工厂方法来创建两个不同类型的图表实例。
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
var chart2 = new google.visualization.LineChart(document.getElementById('chart2'));其中 ColumnChart 表示柱状图，而 LineChart 表示折线图。document.getElementById('chart1') 和 document.getElementById('chart2') 则分别是两个用于渲染图表的 DOM 元素。
步骤六：绘制图表
最后，调用 draw 方法将图表数据和选项传递给相应的图表实例，并渲染出来。
chart1.draw(data1, options1); chart2.draw(data2, options2);
至此，我们已经成功地在同一页上添加两个不同类型的谷歌图表。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------- ------ ---------------
------- ---------------------- --------------------------------------------------------
------- -----------------------
----------------------------- - ----------- ------------- ---
--------------------------------------------
-------- ------------ -
--- ----- - ---------------------------------------
-------- ------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------