求助: 双轴折柱混合图表,柱状图不显示。
pycxu opened this issue · comments
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;