65.9K
CodeProject 正在变化。 阅读更多。
Home

GoogleCharts 渲染器

Satish A. J. Wadekar
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2018年2月20日

BSD

4分钟阅读

viewsIcon

8827

downloadIcon

120

轻松几步实现 Google 图表。

引言

Google 开发了一个非常强大的图表工具，其中包含大约 28 种图表类型。但是，要在您的应用程序中实现这些图表，您需要了解编码标准并在应用程序代码中遵循相同的标准。但是，假设您需要在页面上实现多个图表，那么您将不得不为每个图表重写相同的代码行。

背景

Google 图表使用 DaTaTable 格式，因此我们需要以相同的格式提供数据，这是强制性的，但是如果您想按原样传递数据，无需任何更改怎么办？因此，为了简化开发和实现，我开发了一个库模块，我们只需要设置一些选项即可完成。

除此之外，我还开发了一个模块，我们可以在其中 生成任何图表的配置设置，这些图表来自 Google 图表库。因此，只需点击几下，我们就可以调整图表设置，使我们的图表高度可定制。

主要特点

  • 轻松实现 Google 图表
  • 无需浏览 Google 图表的全部 JavaScript 代码
  • 轻松几步实现 Google 图表
  • 只需更改选项即可切换图表
  • 将原始 JSON 数据转换为 Google 图表DataTable*

工作原理

此库模块在内部遵循 Google 图表 JavaScript 代码的所有步骤，因此它只是一个 JavaScript 包装器库，它封装了所有复杂的代码，并为您提供了非常简单的选项来轻松实现复杂的代码。

属性和函数

Google 图表根据我们与数据一起传递的选项绘制图表，其中数据可以是 JSON 格式或 Google DaTaTable 格式，但配置设置仅为 JSON 格式。（@注意：在这里，我的 GoogleChart 配置生成器就派上用场了。只需复制从我的配置生成器模块生成的配置并将其传递给此属性即可。）

      // <field name='options' type='Object'>
      // This will contains Settings for Chart.
      // Default: {};
      // </field>
      _Scope.options = null;

任何 Google 图表都需要其自己的 DaTaTable 格式 数据，我们通常有自己的自定义 JSON 格式，无论是从任何 API 返回的还是从任何方法返回的。因此，在这种情况下，我们无需关心我们的 JSON 数据格式是什么，只需将其传递给此选项即可，插件内部已对其进行了处理。

      // <field name='data' type='Object'>
      // This will contains your raw JSON Data of key-value pair.
      // Default: {};
      // </field>
      _Scope.data = null;

在您的原始 JSON 数据中，如果您有大量的键值对 JSON，但在其中只想使用某些对来绘制图表，那么您只需要以数组格式传递这些列名或键名到此选项即可。此选项将仅从您的原始 JSON 数据中分离出提到的列名或键名，并将其转换为 Google DaTaTable 格式。

      // <field name='SelectColumns' type='Object'>
      // This will contains Array of Column Names 
      // which will be use from your raw JSON data
      // to draw google chart. 
      // Default: [];
      // </field>
      _Scope.SelectColumns = [];

有时，如果您想直接传递 Google Datatable 格式，您可以将其传递到这里。如果您传递原始 JSON 数据，则它会在插件内部自动转换为 DataTables。

      // <field name='DataTable' type='Object'>
      // This will contains google Visualization DataTable data.
      // Default: {};
      // </field>
      _Scope.DataTable = null;

库始终期望原始 JSON 数据。因此，每次它都会将原始 json 数据转换为 Google Datatables 格式。但是，如果您直接传递 Google Datatables，则需要明确告诉插件绕过转换过程，因为需要的数据格式将直接传递。

      // <field name='ByPassConvertToDataTable' type='Object'>
      // This will contains google Visualization DataTable data.
      // Default: {};
      // </field>
      _Scope.ByPassConvertToDataTable = null;

有超过 20 种不同类型的 Google 图表，您需要在此处指定要绘制的图表类型。

      // <field name='type' type='String'>
      // This will contains chart type.
      // (Chose from "ChartType" Enum).
      // Default: ChartType.Table;
      // </field>
      _Scope.type = "";

在 Google 图表中，我们需要传递HTMLElement ID，Google 图表工具将在其中渲染或绘制图表，因此我们需要指定页面上图表将绘制到的任何现有 HTML 元素 ID。

      // <field name='HTMLElementId' type='String'>
      // This will contains Id of targeted HTML Element 
      // Default: body;
      // </field>
      _Scope.HTMLElementId = "";

如果您想在图表绘制完成后调用任何回调函数，则只需要在此选项中传递您的回调函数名称即可。您的函数会在图表绘制完成后立即被调用。

      // <field name='fnCallBackAfterDraw' type='Object'>
      // This will contains callback function which will call after draw chart 
      // Default: null;
      // </field>
      _Scope.fnCallBackAfterDraw = null;

这是一个非常基本的非强制性选项（它已经存在于 Google 图表设置生成器中），但如果您不打算传递任何自定义配置设置并且想要绘制默认的 Google 图表，您仍然可以使用它。

      // <field name='height' type='String'>
      // This will contains height in Number or String format.
      // e.g. Number 300 will appear 300px height 
      // String '30%' will appear 30% height
      // Default: 500px;
      // </field>
      _Scope.height = "";

这是一个非常基本的非强制性选项（它已经存在于 Google 图表设置生成器中），但如果您不打算传递任何自定义配置设置并且想要绘制默认的 Google 图表，您仍然可以使用它。

      // <field name='width' type='Number'>
      // This will contains height in Number or String format.
      // e.g. Number 300 will appear 300px width 
      // String '30%' will appear 30% width
      // Default: 500px;
      // </field>
      _Scope.width = "";

如何在您的页面中安装此库

  1. 在您的页面中添加 GoogleChart 加载器 脚本
             //<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  2. 在您的页面中添加我的 *GoogleChart.js* 库
              //<script type="text/javascript" src="js/GoogleChart.js"></script>
  3. 根据您的需要添加以下代码
          // Initialize Google chart class
      var ObjGoogleCharts = new GoogleCharts(); //mandatory
      
      // create an object of class settings
      var Settings = new ObjGoogleCharts.oSetting(); //mandatory
      
      // Set your chart type
      Settings.type = 'PieChart';//mandatory
      
      // your RAW Json Data
      Settings.data = data;//mandatory
      
      // if u are passing Google Datatable directly then bypass google Datatables Conversion process
      Settings.ByPassConvertToDataTable = true; //optional
      
      // pass google Datatable format Directly
      Settings.DataTable = data; //optional
      
      // Chart going to Draw inside this HTML element
      Settings.HTMLElementId = 'Your-HTML-Element-Id'; //mandatory
      
      // pass your settings to this public function fnDrawChart to Draw Google Chart
      ObjGoogleCharts.fnDrawChart(Settings); //mandatory

就完成了。太棒了……

一些功能正在规划中

  • 向下钻取功能
  • 向下钻取事件的回调功能
  • 从选定的图表区域返回向下钻取事件的数据
© . All rights reserved.