配置图表展示逻辑

一个基础可视化App的目录结构如下图所示。

自定义图表的实现源码存放于appserver/static/visualizations/<visualization_name>/src目录下，该目录下包含一个标准的前端项目组织结构。该项目将编译以后的js和css文件输出成上层目录的visualization.js和visualization.css文件，Pandora 2.0平台会加载生成的visualization.js和visualization.css文件。

1.自定义图表逻辑

• appserver/static/visualizations/<visualization_name>/src/<visualization_source.js>：是可视化图表的逻辑源代码。

  • <visualization_source.js>必须导出一个继承自VisualizationBase的JS对象；
  • <visualization_source.js>中必须重载VisualizationBase的updateView方法；
  • 通过webpack打包生成下面的visualization.js文件，以AMD格式导出模块。

• appserver/static/visualizations/<visualization_name>/visualization.js：是最终有效的自定义图表代码逻辑，通常是由appserver/static/visualizations/<visualization_name>/src目录下源文件编译生成的，该文件最终是一个AMD模块。

VisualizationBase

该类为绘图的核心类，作为平台与自定义逻辑沟通的桥梁。提供大量的生命周期方法，通过重载这些方法来实现自定义图表逻辑。其中那您必须虫灾updateView方法，其它可选。

initialize（可选）

自定义初始化逻辑。

• 参数：void
• 返回值：void

getInitialDataParams（可选）

定义初始化参数，根据参数决定 App 中获取到的数据格式。

• 参数：void
• 返回值：
  • outputMode: 数据格式,支持json_cols, json_rows, json,
  • count: 返回的数据量

{
  "outputMode": "json_cols",
  "count": 100
}

formatData（可选）

对获取到的数据进行格式化，在 updateView 前执行。

• 参数：

  • data: 获取到的数据

• 返回值：

  • data: format 后的数据

updateView（必须）

实现图表渲染逻辑，图表数据或图表样式发生变化时执行。

• 参数：
  • data：formatData 格式化后的数据
  • config： 当前图表配置
• 返回值：void
• optional
• 参数：void
• 返回值：void

onConfigChange（可选）

样式配置变化时执行，在 updateView 前执行。

• 参数：
  • config: 图表样式配置对象
• 返回值：void

remove（可选）

回收资源，在图表销毁时执行。

• 参数：void
• 返回值：void

element（可选）

VisualizationBase 中包含挂载可视化图表的 dom 元素，可通过 this.element获取。

2.打包方法

打包配置

模版应用中包含基本编译打包脚本，您可以通过Webpack工具实现打包，打包脚本中主要文件包括：

• package.json：前端依赖包管理文件，描述自定义图表的包依赖。

• webpack.config.js：Webpack打包配置文件。

  • 将指定的入口js模块打包成visualization.js，将css文件打包成visualization.css。

  • 只能包含一个入口模块，默认取名为visualization。

打包步骤

1. 打开可视化模版，重命名<visualization_name>文件夹名称，作为图表的名称。
2. 添加自定义图表的逻辑代码到 <visualization_source.js>。
3. 添加自定义图表的依赖包到package.json。
4. 安装依赖：npm install。
5. 打包：npm run build。