数据转换

2024-07-09 10:48| 来源: 网络整理| 查看: 265

使用 transform 进行数据转换

Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。

抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

把数据分成多份用不同的饼图展现。进行一些数据统计运算，并展示结果。用某些数据可视化算法处理数据，并展示结果。数据排序。去除或直选择数据项。 ... 数据转换基础使用

在 echarts 中，数据转换是依托于数据集（dataset）来实现的. 我们可以设置 dataset.transform 来表示，此 dataset 的数据，来自于此 transform 的结果。

下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。

var option = { dataset: [ { // 这个 dataset 的 index 是 `0`。 source: [ ['Product', 'Sales', 'Price', 'Year'], ['Cake', 123, 32, 2011], ['Cereal', 231, 14, 2011], ['Tofu', 235, 5, 2011], ['Dumpling', 341, 25, 2011], ['Biscuit', 122, 29, 2011], ['Cake', 143, 30, 2012], ['Cereal', 201, 19, 2012], ['Tofu', 255, 7, 2012], ['Dumpling', 241, 27, 2012], ['Biscuit', 102, 34, 2012], ['Cake', 153, 28, 2013], ['Cereal', 181, 21, 2013], ['Tofu', 395, 4, 2013], ['Dumpling', 281, 31, 2013], ['Biscuit', 92, 39, 2013], ['Cake', 223, 29, 2014], ['Cereal', 211, 17, 2014], ['Tofu', 345, 3, 2014], ['Dumpling', 211, 35, 2014], ['Biscuit', 72, 24, 2014] ] // id: 'a' }, { // 这个 dataset 的 index 是 `1`。 // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。 transform: { type: 'filter', config: { dimension: 'Year', value: 2011 } } // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。 // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如， // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如， // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。 // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。 }, { // 这个 dataset 的 index 是 `2`。 // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定， // 那么输入默认来自于 index 为 `0` 的 dataset 。 transform: { // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。 type: 'filter', // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。 // 在这个 "filter" transform 中，`config` 用于指定筛选条件。 // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有 // 数据项。 config: { dimension: 'Year', value: 2012 } } }, { // 这个 dataset 的 index 是 `3`。 transform: { type: 'filter', config: { dimension: 'Year', value: 2013 } } } ], series: [ { type: 'pie', radius: 50, center: ['25%', '50%'], // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述 // 2011 年那个 "filter" transform 的结果。 datasetIndex: 1 }, { type: 'pie', radius: 50, center: ['50%', '50%'], datasetIndex: 2 }, { type: 'pie', radius: 50, center: ['75%', '50%'], datasetIndex: 3 } ] }; live

现在我们简单总结下，使用 transform 时的几个要点：

在一个空的 dataset 中声明 transform, fromDatasetIndex/fromDatasetId 来表示我们要生成新的数据。系列引用这个 dataset 。数据转换的进阶使用链式声明 transform

transform 可以被链式声明，这是一个语法糖。

option = { dataset: [ { source: [ // 原始数据 ] }, { // 几个 transform 被声明成 array ，他们构成了一个链， // 前一个 transform 的输出是后一个 transform 的输入。 transform: [ { type: 'filter', config: { dimension: 'Product', value: 'Tofu' } }, { type: 'sort', config: { dimension: 'Year', order: 'desc' } } ] } ], series: { type: 'pie', // 这个系列引用上述 transform 的结果。 datasetIndex: 1 } };

注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。

一个 transform 输出多个 data

在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。

例如，在内置的 "boxplot" transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，example。

我们提供配置 dataset.fromTransformResult 来满足这种情况，例如：

option = { dataset: [ { // 这个 dataset 的 index 为 `0`。 source: [ // 原始数据 ] }, { // 这个 dataset 的 index 为 `1`。 transform: { type: 'boxplot' } // 这个 "boxplot" transform 生成了两个数据： // result[0]: boxplot series 所需的数据。 // result[1]: 离群点数据。 // 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到 // result[0] 。 // 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ： }, { // 这个 dataset 的 index 为 `2`。 // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。 fromDatasetIndex: 1, // 并且指定了获取 transform result[1] 。 fromTransformResult: 1 } ], xAxis: { type: 'category' }, yAxis: {}, series: [ { name: 'boxplot', type: 'boxplot', // Reference the data from result[0]. // 这个 series 引用 index 为 `1` 的 dataset 。 datasetIndex: 1 }, { name: 'outlier', type: 'scatter', // 这个 series 引用 index 为 `2` 的 dataset 。 // 从而也就得到了上述的 transform result[1] （即离群点数据） datasetIndex: 2 } ] };

另外，dataset.fromTransformResult 和 dataset.transform 能同时出现在一个 dataset 中，这表示，这个 transform 的输入，是上游的结果中以 fromTransformResult 获取的结果。例如：

{ fromDatasetIndex: 1, fromTransformResult: 1, transform: { type: 'sort', config: { dimension: 2, order: 'desc' } } } 在开发环境中 debug

使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 transform.print 方便 debug 。这个配置项只在开发环境中生效。如下例：

option = { dataset: [ { source: [] }, { transform: { type: 'filter', config: {}, // 配置为 `true` 后， transform 的结果 // 会被 console.log 打印出来。 print: true } } ] // ... }; 数据转换器 "filter"

echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 transform.type: "filter"，以及给出数据筛选条件。如下例：

option = { dataset: [ { source: [ ['Product', 'Sales', 'Price', 'Year'], ['Cake', 123, 32, 2011], ['Latte', 231, 14, 2011], ['Tofu', 235, 5, 2011], ['Milk Tee', 341, 25, 2011], ['Porridge', 122, 29, 2011], ['Cake', 143, 30, 2012], ['Latte', 201, 19, 2012], ['Tofu', 255, 7, 2012], ['Milk Tee', 241, 27, 2012], ['Porridge', 102, 34, 2012], ['Cake', 153, 28, 2013], ['Latte', 181, 21, 2013], ['Tofu', 395, 4, 2013], ['Milk Tee', 281, 31, 2013], ['Porridge', 92, 39, 2013], ['Cake', 223, 29, 2014], ['Latte', 211, 17, 2014], ['Tofu', 345, 3, 2014], ['Milk Tee', 211, 35, 2014], ['Porridge', 72, 24, 2014] ] }, { transform: { type: 'filter', config: { dimension: 'Year', '=': 2011 } // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ） // 'Year' 上值为 2011 的所有数据项。 } } ], series: { type: 'pie', datasetIndex: 1 } }; live

这是 filter 的另一个例子的效果：

在 "filter" transform 中，有这些要素：

关于维度（ dimension ）：

config.dimension 指定了维度，能设成这样的值：

设定成声明在 dataset 中的维度名，例如 config: { dimension: 'Year', '=': 2011 }。不过， dataset 中维度名的声明并非强制，所以我们也可以设定成 dataset 中的维度 index （index 值从 0 开始）例如 config: { dimension: 3, '=': 2011 }。

关于关系比较操作符：

关系操作符，可以设定这些： >（gt）、>=（gte）、, >=,

【本文地址】

数据转换

数据转换

今日新闻

推荐新闻