Open pycxu opened 2 years ago
BizCharts Version: "bizcharts": "^4.1.16", Platform: React Mini Showcase(like screenshots): 模仿这个例子做的:https://bizcharts.taobao.com/product/BizCharts4/demo/414
从后端拿到数据后,柱状图不显示,但是如果本地定义同样的数据,却可以显示 (用state的data不显示;用data1却可以)。 请问这是为什么?
const data1 = [ {city: 'Melbourne (C)', sentiment: 0.40320021514051374, mean_aud: 69.078}, {city: 'Sydney (C)', sentiment: 0.42084360449192, mean_aud: 77.84}, {city: 'Adelaide (C)', sentiment: 0.4243085880640466, mean_aud: 74.843}, {city: 'Perth (C)', sentiment: 0.4495846876128567, mean_aud: 90.6}, {city: 'Brisbane (C)', sentiment: 0.41321651725074704, mean_aud: 68.058} ];
完整代码:
import React, { useState, useEffect } from "react"; import { Chart, Tooltip, Legend, Point, Line, Interval, setGlobal } from "bizcharts"; import { getIncomeWithSocre } from "../utils/helper"; const BarDoubleY = () => { const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const data1 = [ {city: 'Melbourne (C)', sentiment: 0.40320021514051374, mean_aud: 69.078}, {city: 'Sydney (C)', sentiment: 0.42084360449192, mean_aud: 77.84}, {city: 'Adelaide (C)', sentiment: 0.4243085880640466, mean_aud: 74.843}, {city: 'Perth (C)', sentiment: 0.4495846876128567, mean_aud: 90.6}, {city: 'Brisbane (C)', sentiment: 0.41321651725074704, mean_aud: 68.058} ]; useEffect(() => { const fetchData = async () => { const income = await getIncomeWithSocre(); setData(income); setIsLoading(false); console.log("data, ", income); console.log("data1, ", data1); } fetchData(); },[]) let chartIns = null; const scale = { sentiment: { min: 0, tickCount: 4, alias: 'sentiment', type: 'linear-strict' }, mean_aud: { min: 0, tickCount: 4, alias: 'mean_aud', type: 'linear-strict' } }; const colors = ["#6394f9", "#62daaa"]; if(isLoading) { return ( <div> Loading... </div> ); }else { return ( <Chart scale={scale} autoFit height={400} data={data} // 用data不会显示柱状图,但是用data1却可以 onGetG2Instance={(chart) => { chartIns = chart; }} > <Legend custom={true} allowAllCanceled={true} items={[ { value: "mean_aud", name: "mean_aud", marker: { symbol: "square", style: { fill: colors[0], r: 5 }, }, }, { value: "sentiment", name: "sentiment", marker: { symbol: "hyphen", style: { stroke: colors[1], r: 5, lineWidth: 3 }, }, }, ]} onChange={(ev) => { const item = ev.item; const value = item.value; const checked = !item.unchecked; const geoms = chartIns.geometries; for (let i = 0; i < geoms.length; i++) { const geom = geoms[i]; if (geom.getYScale().field === value) { if (checked) { geom.show(); } else { geom.hide(); } } } }} /> <Tooltip shared /> <Interval position="city*mean_aud" color={colors[0]} /> <Line position="city*sentiment" color={colors[1]} size={3} shape="smooth" /> <Point position="city*sentiment" color={colors[1]} size={3} shape="circle" /> </Chart> ); } } export default BarDoubleY;
BizCharts Version: "bizcharts": "^4.1.16", Platform: React Mini Showcase(like screenshots): 模仿这个例子做的:https://bizcharts.taobao.com/product/BizCharts4/demo/414
从后端拿到数据后,柱状图不显示,但是如果本地定义同样的数据,却可以显示 (用state的data不显示;用data1却可以)。 请问这是为什么?
完整代码: