如何用指针在饼图中显示动态数据

问题描述 投票：0回答：1

我正在尝试用带有重新图表的指针制作饼图。 链接。实际上，我是从下拉列表中选择一个州名称，并希望通过指针在饼图中显示所选州的能耗数据。所以这是我的 states.json 文件：

[
    {
        "state_id": "1",
        "sortname": "AF",
        "state_name": "ANDAMAN & NICOBAR ISLANDS",
        "energyData": [
            {
                "data_id": "1",
                "data": "367.3948635",
                "state_id": "1"
            }
        ]
    },
    {
        "state_id": "2",
        "sortname": "DZ",
        "state_name": "ANDHRA PRADESH",
        "energyData": [
            {
                "data_id": "2",
                "data": "328.8017687",
                "state_id": "2"
            }
        ]
    },
    {
        "state_id": "3",
        "sortname": "AS",
        "state_name": "ARUNACHAL PRADESH",
        "energyData": [
            {
                "data_id": "3",
                "data": "120.9100817",
                "state_id": "3"
            }
        ]
    },
    {
        "state_id": "4",
        "sortname": "AD",
        "state_name": "ASSAM",
        "energyData": [
            {
                "data_id": "4",
                "data": "105.9831799",
                "state_id": "4"
            }
        ]
    },
    {
        "state_id": "5",
        "sortname": "AO",
        "state_name": "CHANDIGARH",
        "energyData": [
            {
                "data_id": "5",
                "data": "564.5855402",
                "state_id": "5"
            }
        ]
    },
    {
        "state_id": "6",
        "sortname": "AI",
        "state_name": "BIHAR",
        "energyData": [
            {
                "data_id": "6",
                "data": "118.696485",
                "state_id": "6"
            }
        ]
    },
    {
        "state_id": "7",
        "sortname": "AQ",
        "state_name": "CHHATTISGARH",
        "energyData": [
            {
                "data_id": "7",
                "data": "213.6288618",
                "state_id": "7"
            }
        ]
    },
    {
        "state_id": "8",
        "sortname": "AG",
        "state_name": "DADRA & NAGAR HAVELI",
        "energyData": [
            {
                "data_id": "7",
                "data": "213.6288618",
                "state_id": "8"
            }
        ]
    },
    {
        "state_id": "9",
        "sortname": "AR",
        "state_name": "DAMAN & DIU ",
        "energyData": [
            {
                "data_id": "7",
                "data": "213.6288618",
                "state_id": "9"
            }
        ]
    },
    {
        "state_id": "10",
        "sortname": "AM",
        "state_name": "GOA",
        "energyData": [
            {
                "data_id": "7",
                "data": "213.6288618",
                "state_id": "10"
            }
        ]
    }
]

这是我的计算页面，下拉列表在哪里：

import React, { useState } from 'react';
import LetsGoButton from './LetsGoButton';
import statesData from '../../public/states.json'
import Meter from './Meter';

const Calculation = () => {
    const [statesId, setStatesId] = useState('')
    const [avgConsumptionData, setAvgConsumptionData] = useState([])
    const [conDataId, setConDataId] = useState('')


    const handleStates = (e) => {
        const getStateId = e.target.value
        const getAvgEnergyData = statesData.find(state => state.state_id === getStateId)?.energyData
        setAvgConsumptionData(getAvgEnergyData)
        setStatesId(getStateId)
    }


    const handleAvgConsumptionData = (e) => {
        const conDataId = e.target.value
        console.log(conDataId);
        setConDataId(conDataId)
    }


    return (
        <section>
            <div>

                <div>

                    {/*  STATE */}
                    <div>
                        <select defaultValue="State" name="state" id="state" onChange={(e) => handleStates(e)}>
                            <option selected disabled>State</option>
                            {
                                statesData.map((data, idx) => (
                                    <option value={data.state_id} key={idx}>{data.state_name}</option>
                                ))
                            }
                        </select>
                    </div>

                    <Meter conData={avgConsumptionData} />
                </div>
                <LetsGoButton />
            </div>
        </section>
    );
};

export default Calculation;

我将 avgConsumptionData 传递给 Meter 组件，并尝试在指针值中动态设置数据。这是 Meter 组件：

import React, { useState } from 'react';
import { PieChart, Pie, Cell } from 'recharts';

const Meter = ({ conData}) => {
   console.log(conData);
    const RADIAN = Math.PI / 180;
    const data = [
        { name: '0', value: 0, color: '#ff0000' },
        { name: '150', value: 150, color: '#00ff00' },
        { name: '300', value: 300, color: '#0000ff' },
        { name: '450', value: 450, color: '#924f64' },
        { name: '600', value: 600, color: '#dc8965' },
        { name: '750', value: 750, color: '#d2e1f7' },
        { name: '900', value: 900, color: '#131b27' },
];
    const cx = 150;
    const cy = 200;
    const iR = 50;
    const oR = 100;
    const value = conData
    // const value = conData[0].data
    // const value = conData.map(x => x.data)
    const needle = (value, data, cx, cy, iR, oR, color) => {
        let total = 0;
        data.forEach((v) => {
            total += v.value;
        });
        const ang = 180.0 * (1 - value / total);
        const length = (iR + 2 * oR) / 3;
        const sin = Math.sin(-RADIAN * ang);
        const cos = Math.cos(-RADIAN * ang);
        const r = 5;
        const x0 = cx + 5;
        const y0 = cy + 5;
        const xba = x0 + r * sin;
        const yba = y0 - r * cos;
        const xbb = x0 - r * sin;
        const ybb = y0 + r * cos;
        const xp = x0 + length * cos;
        const yp = y0 + length * sin;

        return [
            <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" />,
            <path d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`} stroke="#none" />,
        ];
    };
    return (
        <div>
            <PieChart>
                <Pie
                    dataKey="value"
                    startAngle={180}
                    endAngle={0}
                    data={data}
                    cx={cx}
                    cy={cy}
                    innerRadius={iR}
                    outerRadius={oR}
                    fill="#8884d8"
                    stroke="none"
                >
                    {data.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                </Pie>
                {needle(value, data, cx, cy, iR, oR, '#d0d000')}
            </PieChart>
        </div>
    );
};

export default Meter;

因此，当我登录包含具有所选状态数据的 conData 的“值”变量时，我在控制台中看到一个包含 data_id、数据和 state_id 的数组。但是当我想映射数组时发生错误：

TypeError：无法读取未定义的属性（读取“地图”）

为什么会出现这个错误？从计算组件到Meter组件的数据传递方式是正确的还是错误的？还有其他方法可以解决吗？

reactjs charts pie-chart recharts needle
1个回答
0
投票

我刚刚将您传递给 Meter 组件的数据类型从数组更改为对象。

计算.js

const handleStates = (e) => {
    const getStateId = e.target.value
    const getAvgEnergyData = statesData.find(state => state.state_id === getStateId)?.energyData
    setAvgConsumptionData(getAvgEnergyData[0])
    setStatesId(getStateId)
}

Meter.js

const Meter = ({ conData}) => {
    console.log(conData);
    const RADIAN = Math.PI / 180;
    const data = [
        { name: '0', value: 0, color: '#ff0000' },
        { name: '150', value: 150, color: '#00ff00' },
        { name: '300', value: 300, color: '#0000ff' },
        { name: '450', value: 450, color: '#924f64' },
        { name: '600', value: 600, color: '#dc8965' },
        { name: '750', value: 750, color: '#d2e1f7' },
        { name: '900', value: 900, color: '#131b27' },
];
    const cx = 150;
    const cy = 200;
    const iR = 50;
    const oR = 100;
    const value = conData.data
    // const value = conData[0].data
    // const value = conData.map(x => x.data)
    const needle = (value, data, cx, cy, iR, oR, color) => {
        let total = 0;
        data.forEach((v) => {
            total += v.value;
        });
        const ang = 180.0 * (1 - value / total);
        const length = (iR + 2 * oR) / 3;
        const sin = Math.sin(-RADIAN * ang);
        const cos = Math.cos(-RADIAN * ang);
        const r = 5;
        const x0 = cx + 5;
        const y0 = cy + 5;
        const xba = x0 + r * sin;
        const yba = y0 - r * cos;
        const xbb = x0 - r * sin;
        const ybb = y0 + r * cos;
        const xp = x0 + length * cos;
        const yp = y0 + length * sin;

        return [
            <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" />,
            <path d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`} stroke="#none" />,
        ];
    };
    return (
        <div>
                <PieChart width={400} height={500}>
                <Pie
                    dataKey="value"
                    startAngle={180}
                    endAngle={0}
                    data={data}
                    cx={cx}
                    cy={cy}
                    innerRadius={iR}
                    outerRadius={oR}
                    fill="#8884d8"
                    stroke="none"
                >
                    {data.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                </Pie>
                {needle(value, data, cx, cy, iR, oR, '#d0d000')}
            </PieChart>
        </div>
    );
};

export default Meter;

您可以使用 conData.data 简单地从对象中获取数据属性。 也不要忘记向饼图添加宽度和高度属性。

<PieChart width={400} height={500}>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.