Closed taofeifanIT closed 2 years ago
从https://charts.ant.design/zh/examples/plugin/association#association-filter复制下来的代码,在本地跑直接报错,不知道如何解决
`import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { Mix, G2 } from '@ant-design/plots';
const DemoMix = () => { const [data, setData] = useState({});
useEffect(() => { asyncFetch(); }, []);
const asyncFetch = () => { fetch('https://gw.alipayobjects.com/os/antfincdn/HkxWvFrZuC/association-data.json') .then((response) => response.json()) .then((json) => setData(json)) .catch((error) => { console.log('fetch data failed', error); }); }; G2.registerInteraction('custom-association-filter', { showEnable: [ { trigger: 'element:mouseenter', action: 'cursor:pointer', }, { trigger: 'element:mouseleave', action: 'cursor:default', }, ], start: [ { trigger: 'element:click', action: (context) => { const { view, event } = context; // 获取第二个 view console.log(view) const view1 = view.parent.views[1]; view1.filter('area', (d) => d === event.data?.data.area); view1.render(true); }, }, ], end: [ { trigger: 'element:dblclick', action: (context) => { const { view } = context; // 获取第二个 view
const view1 = view.parent.views[1]; view1.filter('area', null); view1.render(true); }, }, ],
}); if (!Object.keys(data).length) { return null; } const config = { // 关闭 chart 上的 tooltip,子 view 开启 tooltip tooltip: false, plots: [ { type: 'pie', region: { start: { x: 0, y: 0, }, end: { x: 1, y: 0.45, }, }, options: { data: data.pie, angleField: 'bill', colorField: 'area', tooltip: { showMarkers: false, }, radius: 0.85, label: { type: 'inner', formatter: '{name}', offset: '-15%', }, interactions: [ { type: 'element-highlight', }, { type: 'custom-association-filter', }, ], }, }, { type: 'area', region: { start: { x: 0, y: 0.5, }, end: { x: 1, y: 0.95, }, }, options: { data: data.line, xField: 'time', yField: 'value', seriesField: 'area', line: {}, point: { style: { r: 2.5, }, }, meta: { time: { range: [0, 1], }, }, smooth: true, tooltip: { showCrosshairs: true, shared: true, }, }, }, ], };
return <Mix {...config} />; };
export default DemoMix `
看下 @ant-design/plots 版本
重新安装一下, npm i @ant-design/plots -S
安装了,升级到"^1.0.9",了都,不知道会不会是和umijs的什么配置冲突啊
🧐 问题描述 [详细地描述问题,让大家都能理解]
从https://charts.ant.design/zh/examples/plugin/association#association-filter复制下来的代码,在本地跑直接报错,不知道如何解决
💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]
`import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { Mix, G2 } from '@ant-design/plots';
const DemoMix = () => { const [data, setData] = useState({});
useEffect(() => { asyncFetch(); }, []);
const asyncFetch = () => { fetch('https://gw.alipayobjects.com/os/antfincdn/HkxWvFrZuC/association-data.json') .then((response) => response.json()) .then((json) => setData(json)) .catch((error) => { console.log('fetch data failed', error); }); }; G2.registerInteraction('custom-association-filter', { showEnable: [ { trigger: 'element:mouseenter', action: 'cursor:pointer', }, { trigger: 'element:mouseleave', action: 'cursor:default', }, ], start: [ { trigger: 'element:click', action: (context) => { const { view, event } = context; // 获取第二个 view console.log(view) const view1 = view.parent.views[1]; view1.filter('area', (d) => d === event.data?.data.area); view1.render(true); }, }, ], end: [ { trigger: 'element:dblclick', action: (context) => { const { view } = context; // 获取第二个 view
}); if (!Object.keys(data).length) { return null; } const config = { // 关闭 chart 上的 tooltip,子 view 开启 tooltip tooltip: false, plots: [ { type: 'pie', region: { start: { x: 0, y: 0, }, end: { x: 1, y: 0.45, }, }, options: { data: data.pie, angleField: 'bill', colorField: 'area', tooltip: { showMarkers: false, }, radius: 0.85, label: { type: 'inner', formatter: '{name}', offset: '-15%', }, interactions: [ { type: 'element-highlight', }, { type: 'custom-association-filter', }, ], }, }, { type: 'area', region: { start: { x: 0, y: 0.5, }, end: { x: 1, y: 0.95, }, }, options: { data: data.line, xField: 'time', yField: 'value', seriesField: 'area', line: {}, point: { style: { r: 2.5, }, }, meta: { time: { range: [0, 1], }, }, smooth: true, tooltip: { showCrosshairs: true, shared: true, }, }, }, ], };
return <Mix {...config} />; };
export default DemoMix `
🚑 其他信息 [如截图等其他信息可以贴在这里]