fix(multi-view): 修复多图层图表折线图联动取数问题 (#2428)

antvis · Mar 17, 2021 · 52fb147 · 52fb147
1 parent 3587ef2
commit 52fb147
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 3 deletions.
diff --git a/examples/dual-axes/column-line/demo/slider-column-line.ts b/examples/dual-axes/column-line/demo/slider-column-line.ts
@@ -0,0 +1,58 @@
+import { DualAxes } from '@antv/g2plot';
+
+const data = [
+  { time: '2020-08-20', consumeTime: 10868, completeTime: 649.483 },
+  { time: '2020-08-21', consumeTime: 8786, completeTime: 1053.7 },
+  { time: '2020-08-22', consumeTime: 10824, completeTime: 679.817 },
+  { time: '2020-08-23', consumeTime: 7860, completeTime: 638.117 },
+  { time: '2020-08-24', consumeTime: 13253, completeTime: 843.3 },
+  { time: '2020-08-25', consumeTime: 17015, completeTime: 1092.983 },
+  { time: '2020-08-26', consumeTime: 19298, completeTime: 1036.317 },
+  { time: '2020-08-27', consumeTime: 13937, completeTime: 1031.9 },
+  { time: '2020-08-28', consumeTime: 11541, completeTime: 803.467 },
+  { time: '2020-08-29', consumeTime: 15244, completeTime: 830.733 },
+  { time: '2020-08-30', consumeTime: 14247, completeTime: 709.867 },
+  { time: '2020-08-31', consumeTime: 9402, completeTime: 665.233 },
+  { time: '2020-09-01', consumeTime: 10440, completeTime: 696.367 },
+  { time: '2020-09-02', consumeTime: 9345, completeTime: 692.867 },
+  { time: '2020-09-03', consumeTime: 18459, completeTime: 936.017 },
+  { time: '2020-09-04', consumeTime: 9763, completeTime: 782.867 },
+  { time: '2020-09-05', consumeTime: 11074, completeTime: 653.8 },
+  { time: '2020-09-06', consumeTime: 11770, completeTime: 856.683 },
+  { time: '2020-09-07', consumeTime: 12206, completeTime: 777.15 },
+  { time: '2020-09-08', consumeTime: 11434, completeTime: 773.283 },
+  { time: '2020-09-09', consumeTime: 16218, completeTime: 833.3 },
+  { time: '2020-09-10', consumeTime: 11914, completeTime: 793.517 },
+  { time: '2020-09-11', consumeTime: 16781, completeTime: 894.45 },
+  { time: '2020-09-12', consumeTime: 10555, completeTime: 725.55 },
+  { time: '2020-09-13', consumeTime: 10899, completeTime: 709.967 },
+  { time: '2020-09-14', consumeTime: 10713, completeTime: 787.6 },
+  { time: '2020-09-15', consumeTime: 0, completeTime: 644.183 },
+  { time: '2020-09-16', consumeTime: 0, completeTime: 1066.65 },
+  { time: '2020-09-17', consumeTime: 20357, completeTime: 932.45 },
+  { time: '2020-09-18', consumeTime: 10424, completeTime: 753.583 },
+];
+
+const dualAxes = new DualAxes('container', {
+  data: [data, data],
+  xField: 'time',
+  yField: ['consumeTime', 'completeTime'],
+  limitInPlot: false,
+  padding: [10, 20, 80, 30], // 需要设置底部 padding 值，同 css
+  slider: {},
+  meta: {
+    time: {
+      sync: false, // 开启之后 slider 无法重绘
+    },
+  },
+  geometryOptions: [
+    {
+      geometry: 'column',
+    },
+    {
+      geometry: 'line',
+    },
+  ],
+});
+
+dualAxes.render();
diff --git a/examples/plugin/association/demo/association-line.ts b/examples/plugin/association/demo/association-line.ts
@@ -0,0 +1,135 @@
+import { MultiView } from '@antv/g2plot';
+import { groupBy, get } from '@antv/util';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/HkxWvFrZuC/association-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    function getDataByArea(area) {
+      return get(groupBy(data.line, 'area'), area, []).map((d) => ({
+        time: d.time,
+        value: Math.random() * d.value,
+        area,
+      }));
+    }
+
+    const plot = new MultiView('container', {
+      // 关闭 chart 上的 tooltip，子 view 开启 tooltip
+      tooltip: false,
+      plots: [
+        {
+          type: 'line',
+          region: { start: { x: 0, y: 0 }, end: { x: 1, y: 0.3 } },
+          options: {
+            data: data.line,
+            xField: 'time',
+            yField: 'value',
+            seriesField: 'area',
+            point: { style: { r: 2.5 } },
+            meta: {
+              time: { range: [0, 1] },
+            },
+            interactions: [{ type: 'association-active' }, { type: 'association-highlight' }],
+          },
+        },
+        {
+          type: 'line',
+          region: { start: { x: 0, y: 0.32 }, end: { x: 0.5, y: 0.65 } },
+          options: {
+            data: getDataByArea('华东'),
+            xField: 'time',
+            yField: 'value',
+            seriesField: 'area',
+            interactions: [{ type: 'association-highlight' }],
+            point: {
+              style: { r: 2.5 },
+              state: {
+                active: {
+                  style: {
+                    lineWidth: 1,
+                    r: 3,
+                  },
+                },
+              },
+            },
+            meta: {
+              time: { range: [0, 1] },
+            },
+            smooth: true,
+            tooltip: {
+              showCrosshairs: true,
+              shared: true,
+            },
+            state: {
+              active: {
+                style: {
+                  lineWidth: 3,
+                },
+              },
+            },
+          },
+        },
+        {
+          type: 'line',
+          region: { start: { x: 0.5, y: 0.32 }, end: { x: 1, y: 0.65 } },
+          options: {
+            data: getDataByArea('华北'),
+            xField: 'time',
+            yField: 'value',
+            seriesField: 'area',
+            interactions: [{ type: 'association-highlight' }],
+            point: { style: { r: 2.5 } },
+            meta: {
+              time: { range: [0, 1] },
+            },
+            smooth: true,
+            tooltip: {
+              showCrosshairs: true,
+              shared: true,
+            },
+          },
+        },
+        {
+          type: 'line',
+          region: { start: { x: 0, y: 0.67 }, end: { x: 0.5, y: 1 } },
+          options: {
+            data: getDataByArea('中南'),
+            xField: 'time',
+            yField: 'value',
+            seriesField: 'area',
+            interactions: [{ type: 'association-highlight' }],
+            point: { style: { r: 2.5 } },
+            meta: {
+              time: { range: [0, 1] },
+            },
+            smooth: true,
+            tooltip: {
+              showCrosshairs: true,
+              shared: true,
+            },
+          },
+        },
+        {
+          type: 'line',
+          region: { start: { x: 0.5, y: 0.67 }, end: { x: 1, y: 1 } },
+          options: {
+            data: getDataByArea('西南'),
+            xField: 'time',
+            yField: 'value',
+            seriesField: 'area',
+            interactions: [{ type: 'association-highlight' }],
+            point: { style: { r: 2.5 } },
+            meta: {
+              time: { range: [0, 1] },
+            },
+            smooth: true,
+            tooltip: {
+              showCrosshairs: true,
+              shared: true,
+            },
+          },
+        },
+      ],
+    });
+
+    plot.render();
+  });
diff --git a/examples/plugin/association/demo/meta.json b/examples/plugin/association/demo/meta.json
@@ -27,6 +27,14 @@
         "en": "Association filter"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24kAk5jxs1v/association-filter.gif"
+    },
+    {
+      "filename": "association-line.ts",
+      "title": {
+        "zh":"折线图联动",
+        "en":"Association line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/67tdfeaWWN/line-association.gif"
     }
   ]
 }
diff --git a/src/plots/multi-view/interactions/association.ts b/src/plots/multi-view/interactions/association.ts
@@ -1,4 +1,4 @@
-import { each, get, map } from '@antv/util';
+import { each, get, map, isArray } from '@antv/util';
 import { registerAction, registerInteraction, View, Element, Action } from '@antv/g2';
 import { getAllElements, getViews, getSilbingViews } from '../../../utils';
 import { clearHighlight, getElementValue } from './utils';
@@ -50,8 +50,8 @@ class Association extends Action {
         const elements = map(getAllElements(v), (ele) => {
           let active = false;
           let inactive = false;
-
-          if (getElementValue(ele, field) === get(data, field)) {
+          const dataValue = isArray(data) ? get(data[0], field) : get(data, field);
+          if (getElementValue(ele, field) === dataValue) {
             active = true;
           } else {
             inactive = true;