在现代Web开发中，数据可视化是一个重要的组成部分。Google图表库提供了丰富的图表类型，但实现它们需要遵循一定的编码标准。如果页面上需要实现多个图表，重复编写相同代码的工作量是巨大的。为了简化这一过程，开发了一个库模块，它允许通过设置一些选项来快速实现图表。
此外，还开发了一个模块，可以为Google图表库中的任何图表生成配置设置。通过几次点击，可以调整图表设置，使图表非常可定制。
- 易于实现Google图表
- 不需要浏览Google图表的全部JavaScript代码
- 通过简单的步骤实现Google图表
- 只需更改选项即可切换图表
- 将原始JSON数据转换为Google图表的DataTable格式
这个库模块在内部遵循Google图表JavaScript代码的所有步骤，它是一个JavaScript包装库，封装了所有复杂代码，并提供了非常简单的选项来轻松实现复杂代码。
Google图表基于传递的选项绘制图表，数据可以是JSON格式或Google DataTable格式，但配置设置仅以JSON格式存在。
JavaScript代码示例：
<field name='options' type='Object'>
// 这将包含图表的设置。
Default: {};
</field>
_Scope.options = null;
任何Google图表都需要以它们自己的DataTable格式提供数据，通常有自己的自定义JSON格式，无论是从任何API返回还是从任何方法中返回。在这种情况下，不需要关心JSON数据格式是什么，只需将其传递给这个选项，插件内部已经处理了。
<field name='data' type='Object'>
// 这将包含原始JSON数据键值对。
Default: {};
</field>
_Scope.data = null;
在原始JSON数据中，如果有大量的键值对JSON，但其中只想使用一些对来绘制图表，那么只需要将这些列名或键名以数组格式传递给这个选项。这个选项将从原始JSON数据中分离出仅提到的列名或键名，并将其转换为Google DataTable格式。
<field name='SelectColumns' type='Object'>
// 这将包含列名数组
// 将从原始JSON数据中使用
// 来绘制Google图表。
Default: [];
</field>
_Scope.SelectColumns = [];
有时，如果想直接传递Google DataTable格式，可以在这里传递。如果传递原始JSON数据，那么它会自动在插件内部转换为DataTables。
<field name='DataTable' type='Object'>
// 这将包含Google Visualization DataTable数据。
Default: {};
</field>
_Scope.DataTable = null;
库总是期望原始JSON数据。所以每次它都会将原始json数据转换为Google DataTables格式。但如果直接传递Google DataTables，那么需要明确告诉插件跳过转换过程，因为需要的数据格式将直接传递。
<field name='ByPassConvertToDataTable' type='Object'>
// 这将包含Google Visualization DataTable数据。
Default: {};
</field>
_Scope.ByPassConvertToDataTable = null;
Google图表有20多种不同的类型，需要在这里指定想要绘制的图表类型。
<field name='type' type='String'>
// 这将包含图表类型。
(Chose from "ChartType" Enum)。
Default: ChartType.Table;
</field>
_Scope.type = "";
在Google图表中，需要传递HTMLElement ID，Google图表工具将在其中渲染或绘制图表，所以需要指定页面上任何现有的HTML元素ID，图表将被绘制。
<field name='HTMLElementId' type='String'>
// 这将包含目标HTML元素的ID
Default: body;
</field>
_Scope.HTMLElementId = "";
如果想在图表绘制后调用任何回调函数，那么只需要在这个选项中传递回调函数名称。函数会在图表绘制后立即被调用。
<field name='fnCallBackAfterDraw' type='Object'>
// 这将包含绘制图表后将调用的回调函数
Default: null;
</field>
_Scope.fnCallBackAfterDraw = null;
这是一个非常基本的非强制性选项（它已经在Google图表设置生成器中），但仍然可以使用它，如果不打算传递任何自定义配置设置，如果想绘制默认的Google图表。
<field name='height' type='String'>
// 这将包含高度，可以是数字或字符串格式。
例如，数字300将显示为300px高度
字符串'30%'将显示为30%高度
Default: 500px;
</field>
_Scope.height = "";
这是一个非常基本的非强制性选项（它已经在Google图表设置生成器中），但仍然可以使用它，如果不打算传递任何自定义配置设置，如果想绘制默认的Google图表。
<field name='width' type='Number'>
// 这将包含宽度，可以是数字或字符串格式。
例如，数字300将显示为300px宽度
字符串'30%'将显示为30%宽度
Default: 500px;
</field>
_Scope.width = "";
在页面中添加GoogleChart Loader脚本：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
在页面中添加GoogleChart.js库：
<script type="text/javascript" src="js/GoogleChart.js"></script>
根据方便添加以下代码：
// 初始化Google图表类
var ObjGoogleCharts = new GoogleCharts();
// 强制创建类设置的对象
var Settings = new ObjGoogleCharts.oSetting();
// 强制设置图表类型
Settings.type = 'PieChart';
// 强制原始Json数据
Settings.data = data;
// 如果直接传递Google DataTable，则跳过Google DataTables转换过程
Settings.ByPassConvertToDataTable = true;
// 可选
// 直接传递Google DataTable格式
Settings.DataTable = data;
// 可选
// 图表将在这个HTML元素内绘制
Settings.HTMLElementId = 'Your-HTML-Element-Id';
// 强制
// 将设置传递给这个公共函数fnDrawChart以绘制Google图表
ObjGoogleCharts.fnDrawChart(Settings);
// 强制，完成了。Hurrayyyyyy...
- 向下钻取功能