自定义图表插件

本文档仅提供2.0API版本的相关功能说明，对于1.0API版本的功能，请参考旧版文档。

当系统内置图表类型无法满足应用需求时， 可以通过自定义图表插件的方式扩展系统图表类型。

参考图表插件章节的内容， 编写 plugin.json、 renderer.js 文件，可选准备其他插件资源文件， 然后将这些插件文件打包为一个以其插件ID命名（plugin.json中的id值）的ZIP插件压缩包。

以管理员身份登录系统，点击主页面右上角设置菜单中的【数据分析 - 图表插件】菜单，然后点击【上传】按钮， 将上述插件压缩包上传安装至系统。

系统用户打开定义图表页面，在【图表类型】中选择使用此图表插件。

下面是一个simple-json-data.zip简单图表插件示例，它输出图表绑定数据集指定字段的JSON格式， 并支持在设置图表配置中设置是否美化输出格式， 也支持在设置图表选项中设置{ prettyJson: false、true }是否美化输出格式。

插件压缩包结构：

simple-json-data.zip
  |--plugin.json
  |--renderer.js

plugin.json文件内容：

{
  id: "simple-json-data",
  nameLabel: "简单JSON数据",
  apiVersion: "2.0",
  dataSetRange: 1,
  dataSignSpec:
  [
    { name: "value", nameLabel: "值" }
  ],
  configForm:
  {
    properties:
    [
      { name: "prettyJson", nameLabel: "美化JSON", type: "boolean" }
    ]
  }
}

renderer.js文件内容：

(function(plugin)
{
  var r =
  {
    depend: { name: "jQuery", acceptVersion: ">=1.8" },
    render: function(chart)
    {
      var renderOptions = { prettyJson: false };
      var configValues = chart.configValues();
      chart.inflateOptions(renderOptions, configValues);
      chart.inflateOptions(renderOptions);
      chart.liveValue("renderOptions", renderOptions);
      var ele = chart.element();
      $("<h1 />").text("输出JSON数据"+(renderOptions.prettyJson ? "（美化JSON）" : "")).appendTo(ele);
      $("<div class='content' />").appendTo(ele);
    },
    update: function(chart, chartResult)
    {
      var renderOptions = chart.liveValue("renderOptions");
      var dataSetBinds = chart.dataSetBindsMain();
      dataSetBinds = chart.dataSetBindsFetched(dataSetBinds, chartResult);
      var ele = chart.element();
      var content = $("> .content", ele);
      content.empty();
      for(let i=0; i<dataSetBinds.length; i++)
      {
        let dataSetBind = dataSetBinds[i];
        let result = chart.resultOf(chartResult, dataSetBind);
        let valueField = chart.dataSetFieldOfSign(dataSetBind, 0);
        let values = chart.resultMapDatas(result, { value: valueField });
        let jsonStr = (renderOptions.prettyJson ? JSON.stringify(values, null, 2) : JSON.stringify(values));
        $("<h2 />").text(chart.dataSetAlias(dataSetBind)).appendTo(content);
        $("<pre />").text(jsonStr).appendTo(content);
      }
    },
    destroy: function(chart)
    {
      var ele = $(chart.element());
      ele.empty();
    }
  };
  return r;
})
(plugin);