机器数据分析平台

  • 机器数据分析平台 > 应用开发者文档 > 配置图表展示逻辑

    配置图表展示逻辑

    最近更新时间:2020-05-06 15:47:55

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

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

    1.自定义图表逻辑

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

      • <visualization_source.js>必须导出一个继承自VisualizationBase的JS对象;
      • <visualization_source.js>中必须重载VisualizationBaseupdateView方法;
      • 通过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
    以上内容是否对您有帮助?
  • Qvm free helper
    Close