alibaba / BizCharts

Powerful data visualization library based on G2 and React.

Home Page:http://bizcharts.net/products/bizCharts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

求助: 双轴折柱混合图表,柱状图不显示。

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
Screen Shot 2022-05-15 at 8 51 17 am
从后端拿到数据后,柱状图不显示,但是如果本地定义同样的数据,却可以显示 (用state的data不显示;用data1却可以)。
请问这是为什么?
Screen Shot 2022-05-15 at 9 13 32 am

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;