Zeppelin 可视化的转换

概述

转换

  • renders 设置允许用户设置列和
  • transforms 根据配置的列转换表格行。

Zeppelin 提供了4种类型的转换。

1. 直通转换

PassthroughTransformation 是一个简单的转换，它完全不转换原始表格数据。

参见 passthrough.js

2. 列选择器转换

ColumnselectorTransformation 用于当你需要 N 个轴但不需要聚合时。

参见 columnselector.js

3. 数据透视转换

PivotTransformation 提供了分组和聚合功能。每个使用 PivotTransformation 的图表都有3个轴。Keys、Groups 和 Values。

参见 pivot.js

4. 高级转换

AdvancedTransformation 提供了更详细的选项，同时提供了 PivotTransformation 和 ColumnselectorTransformation 的现有功能。

  • 多个子图表
  • 可配置的图表轴
  • 参数小部件：input, checkbox, option, textarea
  • 根据类型自动解析参数
  • 展开/折叠轴和参数面板
  • 支持延迟转换的多种转换方法
  • 根据规范哈希重新初始化整个配置。

规格

AdvancedTransformation 需要 spec，其中包含图表的轴和参数详细信息。

让我们创建两个名为 line 和 no-group 的子图表。每个子图表可以根据其需求拥有不同的轴和参数。


class AwesomeVisualization extends Visualization {
  constructor(targetEl, config) {
    super(targetEl, config)

    const spec = {
      charts: {
        'line': {
          transform: { method: 'object', },
          sharedAxis: false, /** set if you want to share axes between sub charts, default is `false` */
          axis: {
            'xAxis': { dimension: 'multiple', axisType: 'key', description: 'serial', },
            'yAxis': { dimension: 'multiple', axisType: 'aggregator', description: 'serial', },
            'category': { dimension: 'multiple', axisType: 'group', description: 'categorical', },
          },
          parameter: {
            'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', },
            'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', },
            'lineWidth': { valueType: 'int', defaultValue: 0, description: 'width of line', },
          },
        },

        'no-group': {
          transform: { method: 'object', },
          sharedAxis: false,
          axis: {
            'xAxis': { dimension: 'single', axisType: 'key', },
            'yAxis': { dimension: 'multiple', axisType: 'value', },
          },
          parameter: {
            'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', },
            'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', },
        },
      },
    }

    this.transformation = new AdvancedTransformation(config, spec)
  }

  ...

  // `render` will be called whenever `axis` or `parameter` is changed 
  render(data) {
    const { chart, parameter, column, transformer, } = data

    if (chart === 'line') {
      const transformed = transformer()
      // draw line chart 
    } else if (chart === 'no-group') {
      const transformed = transformer()
      // draw no-group chart 
    }
  }
}


规格: axis

字段名称 可用值（类型） 描述
dimension single 轴只能包含1列
dimension multiple 轴可以包含多列
axisType key 此轴中的列将用作key，就像在PivotTransformation中一样。这些列将在column.key中提供
axisType aggregator 此轴中的列将用作value，就像在PivotTransformation中一样。这些列将在column.aggregator中提供
axisType group 此轴中的列将用作group，就像在PivotTransformation中一样。这些列将在column.group中提供
axisType (string) 这里可以使用任何字符串值。这些列将在column.custom中提供
maxAxisCount (可选) (int) 此轴可以包含的最大列数。（如果为undefined，则无限制）
minAxisCount (可选) (int) 此轴应包含的最小列数以绘制图表。（在单维度情况下为1）
description (可选) (string) 轴的描述。


这是一个示例。

axis: {
  'xAxis': { dimension: 'multiple', axisType: 'key',  },
  'yAxis': { dimension: 'multiple', axisType: 'aggregator'},
  'category': { dimension: 'multiple', axisType: 'group', maxAxisCount: 2, valueType: 'string', },
},


规格: sharedAxis

如果你为子图表设置了sharedAxis: false，那么它们的轴将保留在全局空间中（共享）。这在创建多个共享轴但具有不同参数的子图表时非常有用。例如，

  • basic-column, stacked-column, percent-column
  • pie 和 donut


这是一个示例。

    const spec = {
      charts: {
        'column': {
          transform: { method: 'array', },
          sharedAxis: true,
          axis: { ... },
          parameter: { ... },
        },

        'stacked': {
          transform: { method: 'array', },
          sharedAxis: true,
          axis: { ... }
          parameter: { ... },
        },


规格: parameter

字段名称 可用值（类型） 描述
valueType string 具有字符串值的参数
valueType int 具有整数值的参数
valueType float 具有浮点值的参数
valueType boolean 通常与checkbox小部件一起使用的布尔值参数
valueType JSON 参数通常与textarea小部件一起使用，具有JSON值。defaultValue应为""（空字符串）。
description (string) 此参数的描述。此值将被解析为HTML以美化输出
widget input 使用 input 小部件。这是默认的小部件（如果 widget 未定义）
widget checkbox 使用 checkbox 小部件。
widget textarea 使用 textarea 小部件。
widget option 使用 select + option 小部件。此参数还应包含 optionValues 字段。
optionValues (Array) 与option小部件一起使用的可用选项值


这是一个示例。

parameter: {
  // string type, input widget
  'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', },

  // boolean type, checkbox widget
  'inverted': { widget: 'checkbox', valueType: 'boolean', defaultValue: false, description: 'invert x and y axes', },

  // string type, option widget with `optionValues`
  'graphType': { widget: 'option', valueType: 'string', defaultValue: 'line', description: 'graph type', optionValues: [ 'line', 'smoothedLine', 'step', ], },

  // HTML in `description`
  'dateFormat': { valueType: 'string', defaultValue: '', description: 'format of date (<a href="https://docs.amcharts.com/3/javascriptcharts/AmGraph#dateFormat">doc</a>) (e.g YYYY-MM-DD)', },

  // JSON type, textarea widget
  'yAxisGuides': { widget: 'textarea', valueType: 'JSON', defaultValue: '', description: 'guides of yAxis ', },


规范: transform

字段名称 可用值（类型） 描述
method object 设计用于需要对象操作的行
method array 设计用于需要数组操作的行
method array:2-key 专为xyz图表设计（例如气泡图）
method drill-down 专为钻取图表设计
method raw 将返回原始的 tableData.rows


无论你指定了什么作为transform.method，transformer的值将始终是用于延迟计算的函数。

// advanced-transformation.util#getTransformer

if (transformSpec.method === 'raw') {
  transformer = () => { return rows; }
} else if (transformSpec.method === 'array') {
  transformer = () => {
    ...
    return { ... }
  }
}

这是实际用法。

class AwesomeVisualization extends Visualization {
  constructor(...) { /** setup your spec */ }

  ... 

  // `render` will be called whenever `axis` or `parameter` are changed
  render(data) {
    const { chart, parameter, column, transformer, } = data

    if (chart === 'line') {
      const transformed = transformer()
      // draw line chart 
    } else if (chart === 'no-group') {
      const transformed = transformer()
      // draw no-group chart 
    }
  }

  ...
}