我正在使用功能组件在 React.js 中制作 AntV 的等值线图。这是我的图表代码:
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
const CustomerByRegion = () => {
const [chartData , setChartData] = useState(null);
useEffect(() => {
getChartData()
.then(data => {
setChartData(data)
})
} ,[] );
const getChartData = () => {
return fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json").then(res => res.json())
.then(mapData => {
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [55, 20]
});
chart.tooltip({
showTitle: false,
showMarkers: false,
shared: true,
});
chart.scale({
longitude: {
sync: true
},
latitude: {
sync: true
}
});
chart.axis(false);
chart.legend('trend', {
position: 'left'
});
const ds = new DataSet();
const worldMap = ds.createView('back')
.source(mapData, {
type: 'GeoJSON'
});
const worldMapView = chart.createView();
worldMapView.data(worldMap.rows);
worldMapView.tooltip(false);
worldMapView.polygon().position('longitude*latitude').style({
fill: '#fff',
stroke: '#ccc',
lineWidth: 1
});
});
}
return isLoading ? (
<Spinner />
) : (
<div id="container">
{chartData}
</div>
);
};
export default CustomerByRegion;
现在此代码位于 .jsx 文件中。
我在“ const chart = new Chart() ”中收到此错误。谁能告诉我解决方案或引导我走向正确的道路?附上错误图片。