ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.95k stars 364 forks source link

🧐[问题]本地跑 ant-design/plots demo报错 #1105

Closed taofeifanIT closed 2 years ago

taofeifanIT commented 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 `

🚑 其他信息 [如截图等其他信息可以贴在这里]

image

lxfu1 commented 2 years ago

看下 @ant-design/plots 版本

lxfu1 commented 2 years ago

重新安装一下, npm i @ant-design/plots -S

taofeifanIT commented 2 years ago

重新安装一下, npm i @ant-design/plots -S

安装了,升级到"^1.0.9",了都,不知道会不会是和umijs的什么配置冲突啊