javascript - React - 如何解析大型 JSON 对象以进行绘图。努力与国家这样做

Question

我无法从我的 Axios 调用中解析大型 JSON 对象并将它们设置为状态，然后作为 X 和 Y 轴数据传递以在react-chartist. 就我而言，我正在绘制股市数据图表。

我一直在尝试使用状态挂钩解析数据chartData，但无法使其正常工作，就像这样response.data.symbol,response.data.adj_close和response.data.date

我还尝试为直接从 axios 调用中获取的 X、Y 和符号数据创建三种不同的状态，但无法实现。

这是我正在使用的代码：

export default function Graph() {
const [chartData, setChartData] = useState([])

    const getData = () => {
      axiosInstance
        .get('price/' + slug)
        .then(result => setChartData(result.data))
    }
    useEffect(() => {
        getData()
    }, [])


    const graphChart = () =>
    {
        var data = {
            
            labels: //date values from JSON object
            series: //adj_close values from JSON object
        };
        var options = {
            width: 500,
            height: 400
        };
        
        return (
                <ChartistGraph data={data} options={options} type="Line" />
        );
    };
     return (
         <Container>
             <Grid>
                 {graphChart()} 
             </Grid>
         </Container>

     );
};

我接近这个错误吗？有没有更简单的方法可以做到这一点？

我已经添加了数据来复制问题，基本上是，我怎样才能解析这样的大对象？请记住，每一行都需要按其各自symbol的图形进行分组。在下面的数据中，有 8 家公司有价值的数据。将所有这些数据放在图表上会很糟糕，但如果我知道如何解析特定符号，那么我将能够自己完成绘图。

[{"symbol":"PG","date":"2020-12-04","adj_close":137.47}, 
 {"symbol":"HSY","date":"2020-12-04","adj_close":150.87}, 
 {"symbol":"CLX","date":"2020-12-04","adj_close":199.98}, 
 {"symbol":"COST","date":"2020-12-04","adj_close":373.43}, 
 {"symbol":"MDLZ","date":"2020-12-04","adj_close":59.03}, 
 {"symbol":"K","date":"2020-12-04","adj_close":62.37}, 
 {"symbol":"KHC","date":"2020-12-04","adj_close":34.12}, 
 {"symbol":"PEP","date":"2020-12-04","adj_close":145.85}, 
 {"symbol":"PG","date":"2020-12-07","adj_close":137.68}, 
 {"symbol":"HSY","date":"2020-12-07","adj_close":149.72}, 
 {"symbol":"CLX","date":"2020-12-07","adj_close":200.61}, 
 {"symbol":"COST","date":"2020-12-07","adj_close":373.33}, 
 {"symbol":"MDLZ","date":"2020-12-07","adj_close":58.41}, 
 {"symbol":"K","date":"2020-12-07","adj_close":61.95}, 
 {"symbol":"KHC","date":"2020-12-07","adj_close":33.6}, 
 {"symbol":"PEP","date":"2020-12-07","adj_close":145.37}, 
 {"symbol":"PG","date":"2020-12-08","adj_close":138.05}, 
 {"symbol":"HSY","date":"2020-12-08","adj_close":150.63}, 
 {"symbol":"CLX","date":"2020-12-08","adj_close":202.88}, 
 {"symbol":"COST","date":"2020-12-08","adj_close":377.6}, 
 {"symbol":"MDLZ","date":"2020-12-08","adj_close":58.29}, 
 {"symbol":"K","date":"2020-12-08","adj_close":62.55}, 
 {"symbol":"KHC","date":"2020-12-08","adj_close":34.34}, 
 {"symbol":"PEP","date":"2020-12-08","adj_close":145.52}, 
 {"symbol":"PG","date":"2020-12-09","adj_close":136.41}, 
 {"symbol":"HSY","date":"2020-12-09","adj_close":152.14}, 
 {"symbol":"CLX","date":"2020-12-09","adj_close":200.51}, 
 {"symbol":"COST","date":"2020-12-09","adj_close":374.29}, 
 {"symbol":"MDLZ","date":"2020-12-09","adj_close":57.72}, 
 {"symbol":"K","date":"2020-12-09","adj_close":62}, 
 {"symbol":"KHC","date":"2020-12-09","adj_close":34.22}, 
 {"symbol":"PEP","date":"2020-12-09","adj_close":145.69}, 
 {"symbol":"PG","date":"2020-12-10","adj_close":135.51}, 
 {"symbol":"HSY","date":"2020-12-10","adj_close":149.7}, 
 {"symbol":"CLX","date":"2020-12-10","adj_close":200.6}, 
 {"symbol":"COST","date":"2020-12-10","adj_close":372.79}, 
 {"symbol":"MDLZ","date":"2020-12-10","adj_close":57.18}, 
 {"symbol":"K","date":"2020-12-10","adj_close":61.98}, 
 {"symbol":"KHC","date":"2020-12-10","adj_close":34.1}, 
 {"symbol":"PEP","date":"2020-12-10","adj_close":144.67}, 
 {"symbol":"PG","date":"2020-12-11","adj_close":136.51}, 
 {"symbol":"HSY","date":"2020-12-11","adj_close":149.11}, 
 {"symbol":"CLX","date":"2020-12-11","adj_close":201.73}, 
 {"symbol":"COST","date":"2020-12-11","adj_close":375.1}, 
 {"symbol":"MDLZ","date":"2020-12-11","adj_close":57.4}, 
 {"symbol":"K","date":"2020-12-11","adj_close":62.11}, 
 {"symbol":"KHC","date":"2020-12-11","adj_close":34.07}, 
 {"symbol":"PEP","date":"2020-12-11","adj_close":144.97}, 
 {"symbol":"PG","date":"2020-12-14","adj_close":135.85}, 
 {"symbol":"HSY","date":"2020-12-14","adj_close":149.14}, 
 {"symbol":"CLX","date":"2020-12-14","adj_close":202.38}, 
 {"symbol":"COST","date":"2020-12-14","adj_close":374.38}, 
 {"symbol":"MDLZ","date":"2020-12-14","adj_close":57.29}, 
 {"symbol":"K","date":"2020-12-14","adj_close":61.92}, 
 {"symbol":"KHC","date":"2020-12-14","adj_close":34.42}, 
 {"symbol":"PEP","date":"2020-12-14","adj_close":144.23}, 
 {"symbol":"PG","date":"2020-12-15","adj_close":136.65}, 
 {"symbol":"HSY","date":"2020-12-15","adj_close":150.23}, 
 {"symbol":"CLX","date":"2020-12-15","adj_close":203.04}, 
 {"symbol":"COST","date":"2020-12-15","adj_close":371.88}, 
 {"symbol":"MDLZ","date":"2020-12-15","adj_close":57.45}, 
 {"symbol":"K","date":"2020-12-15","adj_close":61.24}, 
 {"symbol":"KHC","date":"2020-12-15","adj_close":34.33}, 
 {"symbol":"PEP","date":"2020-12-15","adj_close":144.77}, 
 {"symbol":"PG","date":"2020-12-16","adj_close":137.27}, 
 {"symbol":"HSY","date":"2020-12-16","adj_close":150.28}, 
 {"symbol":"CLX","date":"2020-12-16","adj_close":203.44}, 
 {"symbol":"COST","date":"2020-12-16","adj_close":369.44}, 
 {"symbol":"MDLZ","date":"2020-12-16","adj_close":57.2}, 
 {"symbol":"K","date":"2020-12-16","adj_close":61.5}, 
 {"symbol":"KHC","date":"2020-12-16","adj_close":34.43}, 
 {"symbol":"PEP","date":"2020-12-16","adj_close":144.89}, 
 {"symbol":"PG","date":"2020-12-17","adj_close":138.25}, 
 {"symbol":"HSY","date":"2020-12-17","adj_close":151.61}, 
 {"symbol":"CLX","date":"2020-12-17","adj_close":202.34}, 
 {"symbol":"COST","date":"2020-12-17","adj_close":370.29}, 
 {"symbol":"MDLZ","date":"2020-12-17","adj_close":57.93}, 
 {"symbol":"K","date":"2020-12-17","adj_close":62.48}, 
 {"symbol":"KHC","date":"2020-12-17","adj_close":34.62}, 
 {"symbol":"PEP","date":"2020-12-17","adj_close":145.71}, 
 {"symbol":"PG","date":"2020-12-18","adj_close":139.04}, 
 {"symbol":"HSY","date":"2020-12-18","adj_close":150.88}, 
 {"symbol":"CLX","date":"2020-12-18","adj_close":203.17}, 
 {"symbol":"COST","date":"2020-12-18","adj_close":367}, 
 {"symbol":"MDLZ","date":"2020-12-18","adj_close":58.32}, 
 {"symbol":"K","date":"2020-12-18","adj_close":62.08}, 
 {"symbol":"KHC","date":"2020-12-18","adj_close":34.77}, 
 {"symbol":"PEP","date":"2020-12-18","adj_close":146.93}, 
 {"symbol":"PG","date":"2020-12-21","adj_close":137.52}, 
 {"symbol":"HSY","date":"2020-12-21","adj_close":149.66}, 
 {"symbol":"CLX","date":"2020-12-21","adj_close":202.45}, 
 {"symbol":"COST","date":"2020-12-21","adj_close":364.97}, 
 {"symbol":"MDLZ","date":"2020-12-21","adj_close":57.68}, 
 {"symbol":"K","date":"2020-12-21","adj_close":61.53}, 
 {"symbol":"KHC","date":"2020-12-21","adj_close":34.57}, 
 {"symbol":"PEP","date":"2020-12-21","adj_close":145.4}, 
 {"symbol":"PG","date":"2020-12-22","adj_close":136.55}, 
 {"symbol":"HSY","date":"2020-12-22","adj_close":148.62}, 
 {"symbol":"CLX","date":"2020-12-22","adj_close":201.39}, 
 {"symbol":"COST","date":"2020-12-22","adj_close":362.03}, 
 {"symbol":"MDLZ","date":"2020-12-22","adj_close":57.16}, 
 {"symbol":"K","date":"2020-12-22","adj_close":61.19}, 
 {"symbol":"KHC","date":"2020-12-22","adj_close":34.39}, 
 {"symbol":"PEP","date":"2020-12-22","adj_close":144.02}, 
 {"symbol":"PG","date":"2020-12-23","adj_close":136.34}, 
 {"symbol":"HSY","date":"2020-12-23","adj_close":149.45}, 
 {"symbol":"CLX","date":"2020-12-23","adj_close":202.33}, 
 {"symbol":"COST","date":"2020-12-23","adj_close":361.89}, 
 {"symbol":"MDLZ","date":"2020-12-23","adj_close":57.35}, 
 {"symbol":"K","date":"2020-12-23","adj_close":61.61}, 
 {"symbol":"KHC","date":"2020-12-23","adj_close":34.8}, 
 {"symbol":"PEP","date":"2020-12-23","adj_close":144.41}, 
 {"symbol":"PG","date":"2020-12-24","adj_close":137.72}, 
 {"symbol":"HSY","date":"2020-12-24","adj_close":149.95}, 
 {"symbol":"CLX","date":"2020-12-24","adj_close":203.8}, 
 {"symbol":"COST","date":"2020-12-24","adj_close":364.58}, 
 {"symbol":"MDLZ","date":"2020-12-24","adj_close":57.85}, 
 {"symbol":"K","date":"2020-12-24","adj_close":61.78}, 
 {"symbol":"KHC","date":"2020-12-24","adj_close":34.98}, 
 {"symbol":"PEP","date":"2020-12-24","adj_close":145.06}, 
 {"symbol":"PG","date":"2020-12-28","adj_close":138.68}, 
 {"symbol":"HSY","date":"2020-12-28","adj_close":151.8}, 
 {"symbol":"CLX","date":"2020-12-28","adj_close":202.25}, 
 {"symbol":"COST","date":"2020-12-28","adj_close":371.06}, 
 {"symbol":"MDLZ","date":"2020-12-28","adj_close":58.27}, 
 {"symbol":"K","date":"2020-12-28","adj_close":62.34}, 
 {"symbol":"KHC","date":"2020-12-28","adj_close":35.21}, 
 {"symbol":"PEP","date":"2020-12-28","adj_close":146.91}, 
 {"symbol":"PG","date":"2020-12-29","adj_close":138.42}, 
 {"symbol":"HSY","date":"2020-12-29","adj_close":151.44}, 
 {"symbol":"CLX","date":"2020-12-29","adj_close":201.76}, 
 {"symbol":"COST","date":"2020-12-29","adj_close":372.72}, 
 {"symbol":"MDLZ","date":"2020-12-29","adj_close":58.45}, 
 {"symbol":"K","date":"2020-12-29","adj_close":62.29}, 
 {"symbol":"KHC","date":"2020-12-29","adj_close":34.9}, 
 {"symbol":"PEP","date":"2020-12-29","adj_close":147.42}, 
 {"symbol":"PG","date":"2020-12-30","adj_close":137.77}, 
 {"symbol":"HSY","date":"2020-12-30","adj_close":150.53}, 
 {"symbol":"CLX","date":"2020-12-30","adj_close":201.04}, 
 {"symbol":"COST","date":"2020-12-30","adj_close":374.45}, 
 {"symbol":"MDLZ","date":"2020-12-30","adj_close":58}, 
 {"symbol":"K","date":"2020-12-30","adj_close":61.53}, 
 {"symbol":"KHC","date":"2020-12-30","adj_close":34.67}, 
 {"symbol":"PEP","date":"2020-12-30","adj_close":147.31}, 
 {"symbol":"PG","date":"2020-12-31","adj_close":139.14}, 
 {"symbol":"HSY","date":"2020-12-31","adj_close":152.33}, 
 {"symbol":"CLX","date":"2020-12-31","adj_close":201.92}, 
 {"symbol":"COST","date":"2020-12-31","adj_close":376.78}, 
 {"symbol":"MDLZ","date":"2020-12-31","adj_close":58.47}, 
 {"symbol":"K","date":"2020-12-31","adj_close":62.23}, 
 {"symbol":"KHC","date":"2020-12-31","adj_close":34.66}, 
 {"symbol":"PEP","date":"2020-12-31","adj_close":148.3}, 
 {"symbol":"PG","date":"2021-01-04","adj_close":137.82}, 
 {"symbol":"HSY","date":"2021-01-04","adj_close":150.9}, 
 {"symbol":"CLX","date":"2021-01-04","adj_close":200.44}, 
 {"symbol":"COST","date":"2021-01-04","adj_close":380.15}, 
 {"symbol":"MDLZ","date":"2021-01-04","adj_close":57.92}, 
 {"symbol":"K","date":"2021-01-04","adj_close":61.45}, 
 {"symbol":"KHC","date":"2021-01-04","adj_close":34.23}, 
 {"symbol":"PEP","date":"2021-01-04","adj_close":144.27}, 
 {"symbol":"PG","date":"2021-01-05","adj_close":138.7}, 
 {"symbol":"HSY","date":"2021-01-05","adj_close":150.73}, 
 {"symbol":"CLX","date":"2021-01-05","adj_close":200.01}, 
 {"symbol":"COST","date":"2021-01-05","adj_close":375.74}, 
 {"symbol":"MDLZ","date":"2021-01-05","adj_close":57.98}, 
 {"symbol":"K","date":"2021-01-05","adj_close":61.8}, 
 {"symbol":"KHC","date":"2021-01-05","adj_close":33.57}, 
 {"symbol":"PEP","date":"2021-01-05","adj_close":144.7}, 
 {"symbol":"PG","date":"2021-01-06","adj_close":140.16}, 
 {"symbol":"HSY","date":"2021-01-06","adj_close":151.26}, 
 {"symbol":"CLX","date":"2021-01-06","adj_close":197.41}, 
 {"symbol":"COST","date":"2021-01-06","adj_close":370.02}, 
 {"symbol":"MDLZ","date":"2021-01-06","adj_close":57.87}, 
 {"symbol":"K","date":"2021-01-06","adj_close":61.32}, 
 {"symbol":"KHC","date":"2021-01-06","adj_close":33.94}, 
 {"symbol":"PEP","date":"2021-01-06","adj_close":142.93}, 
 {"symbol":"PG","date":"2021-01-07","adj_close":138.85}, 
 {"symbol":"HSY","date":"2021-01-07","adj_close":151.17}, 
 {"symbol":"CLX","date":"2021-01-07","adj_close":196.43}, 
 {"symbol":"COST","date":"2021-01-07","adj_close":367.92}, 
 {"symbol":"MDLZ","date":"2021-01-07","adj_close":57.76}, 
 {"symbol":"K","date":"2021-01-07","adj_close":60.89}, 
 {"symbol":"KHC","date":"2021-01-07","adj_close":33.695}, 
 {"symbol":"PEP","date":"2021-01-07","adj_close":142.47}, 
 {"symbol":"PG","date":"2021-01-08","adj_close":138.79}, 
 {"symbol":"HSY","date":"2021-01-08","adj_close":152.03}, 
 {"symbol":"CLX","date":"2021-01-08","adj_close":197.84}, 
 {"symbol":"COST","date":"2021-01-08","adj_close":369.94}, 
 {"symbol":"MDLZ","date":"2021-01-08","adj_close":58.19}, 
 {"symbol":"K","date":"2021-01-08","adj_close":60.2}, 
 {"symbol":"KHC","date":"2021-01-08","adj_close":33.62}, 
 {"symbol":"PEP","date":"2021-01-08","adj_close":144.18}, 
 {"symbol":"PG","date":"2021-01-11","adj_close":137.85}, 
 {"symbol":"HSY","date":"2021-01-11","adj_close":150.11}, 
 {"symbol":"CLX","date":"2021-01-11","adj_close":193.73}, 
 {"symbol":"COST","date":"2021-01-11","adj_close":364.01}, 
 {"symbol":"MDLZ","date":"2021-01-11","adj_close":57.09}, 
 {"symbol":"K","date":"2021-01-11","adj_close":59.37}, 
 {"symbol":"KHC","date":"2021-01-11","adj_close":32.85}, 
 {"symbol":"PEP","date":"2021-01-11","adj_close":142.09}, 
 {"symbol":"PG","date":"2021-01-12","adj_close":137.05}, 
 {"symbol":"HSY","date":"2021-01-12","adj_close":149.38}, 
 {"symbol":"CLX","date":"2021-01-12","adj_close":194.24}, 
 {"symbol":"COST","date":"2021-01-12","adj_close":364.2}, 
 {"symbol":"MDLZ","date":"2021-01-12","adj_close":57.32}, 
 {"symbol":"K","date":"2021-01-12","adj_close":58.56}, 
 {"symbol":"KHC","date":"2021-01-12","adj_close":32.18}, 
 {"symbol":"PEP","date":"2021-01-12","adj_close":141.43}, 
 {"symbol":"PG","date":"2021-01-13","adj_close":137.26}, 
 {"symbol":"HSY","date":"2021-01-13","adj_close":149.92}, 
 {"symbol":"CLX","date":"2021-01-13","adj_close":193.74}, 
 {"symbol":"COST","date":"2021-01-13","adj_close":366.95}, 
 {"symbol":"MDLZ","date":"2021-01-13","adj_close":57.37}, 
 {"symbol":"K","date":"2021-01-13","adj_close":59.14}, 
 {"symbol":"KHC","date":"2021-01-13","adj_close":32.01}, 
 {"symbol":"PEP","date":"2021-01-13","adj_close":142.59}, 
 {"symbol":"PG","date":"2021-01-14","adj_close":135.8}, 
 {"symbol":"HSY","date":"2021-01-14","adj_close":147.42}, 
 {"symbol":"CLX","date":"2021-01-14","adj_close":195.55}, 
 {"symbol":"COST","date":"2021-01-14","adj_close":362.35}, 
 {"symbol":"MDLZ","date":"2021-01-14","adj_close":57.31}, 
 {"symbol":"K","date":"2021-01-14","adj_close":59.05}, 
 {"symbol":"KHC","date":"2021-01-14","adj_close":32.08}, 
 {"symbol":"PEP","date":"2021-01-14","adj_close":141.76}, 
 {"symbol":"PG","date":"2021-01-15","adj_close":134.78}, 
 {"symbol":"HSY","date":"2021-01-15","adj_close":148.46}, 
 {"symbol":"CLX","date":"2021-01-15","adj_close":197.52}, 
 {"symbol":"COST","date":"2021-01-15","adj_close":362.16}, 
 {"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22}, 
 {"symbol":"K","date":"2021-01-15","adj_close":59.03}, 
 {"symbol":"KHC","date":"2021-01-15","adj_close":31.99}, 
 {"symbol":"PEP","date":"2021-01-15","adj_close":141.39}, 
 {"symbol":"PG","date":"2021-01-15","adj_close":134.78}, 
 {"symbol":"HSY","date":"2021-01-15","adj_close":148.46}, 
 {"symbol":"CLX","date":"2021-01-15","adj_close":197.52}, 
 {"symbol":"COST","date":"2021-01-15","adj_close":362.16}, 
 {"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22}, 
 {"symbol":"K","date":"2021-01-15","adj_close":59.03}, 
 {"symbol":"KHC","date":"2021-01-15","adj_close":31.99}, 
 {"symbol":"PEP","date":"2021-01-15","adj_close":141.39}, 
 {"symbol":"PG","date":"2021-01-19","adj_close":133.6}, 
 {"symbol":"HSY","date":"2021-01-19","adj_close":148.75}, 
 {"symbol":"CLX","date":"2021-01-19","adj_close":196.51}, 
 {"symbol":"COST","date":"2021-01-19","adj_close":354.47}, 
 {"symbol":"MDLZ","date":"2021-01-19","adj_close":57.14}, 
 {"symbol":"K","date":"2021-01-19","adj_close":58.46}, 
 {"symbol":"KHC","date":"2021-01-19","adj_close":32.36}, 
 {"symbol":"PEP","date":"2021-01-19","adj_close":142.06}, 
 {"symbol":"PG","date":"2021-01-20","adj_close":131.93}, 
 {"symbol":"HSY","date":"2021-01-20","adj_close":149.63}, 
 {"symbol":"CLX","date":"2021-01-20","adj_close":196.93}, 
 {"symbol":"COST","date":"2021-01-20","adj_close":361.3}, 
 {"symbol":"MDLZ","date":"2021-01-20","adj_close":57.1}, 
 {"symbol":"K","date":"2021-01-20","adj_close":57.64}, 
 {"symbol":"KHC","date":"2021-01-20","adj_close":32.86}, 
 {"symbol":"PEP","date":"2021-01-20","adj_close":141.33}, 
 {"symbol":"PG","date":"2021-01-21","adj_close":131.01}, 
 {"symbol":"HSY","date":"2021-01-21","adj_close":148.98}, 
 {"symbol":"CLX","date":"2021-01-21","adj_close":197.21}, 
 {"symbol":"COST","date":"2021-01-21","adj_close":362.8}, 
 {"symbol":"MDLZ","date":"2021-01-21","adj_close":56.12}, 
 {"symbol":"K","date":"2021-01-21","adj_close":57.89}, 
 {"symbol":"KHC","date":"2021-01-21","adj_close":32.78}, 
 {"symbol":"PEP","date":"2021-01-21","adj_close":139.61}, 
 {"symbol":"PG","date":"2021-01-22","adj_close":130}, 
 {"symbol":"HSY","date":"2021-01-22","adj_close":148.2}, 
 {"symbol":"CLX","date":"2021-01-22","adj_close":202.35}, 
 {"symbol":"COST","date":"2021-01-22","adj_close":362.3}, 
 {"symbol":"MDLZ","date":"2021-01-22","adj_close":56.25}, 
 {"symbol":"K","date":"2021-01-22","adj_close":58.3}, 
 {"symbol":"KHC","date":"2021-01-22","adj_close":32.91}, 
 {"symbol":"PEP","date":"2021-01-22","adj_close":138.59}, 
 {"symbol":"PG","date":"2021-01-25","adj_close":132.24}, 
 {"symbol":"HSY","date":"2021-01-25","adj_close":147.53}, 
 {"symbol":"CLX","date":"2021-01-25","adj_close":211.96}, 
 {"symbol":"COST","date":"2021-01-25","adj_close":361.88}, 
 {"symbol":"MDLZ","date":"2021-01-25","adj_close":56.87}, 
 {"symbol":"K","date":"2021-01-25","adj_close":59.84}, 
 {"symbol":"KHC","date":"2021-01-25","adj_close":33.75}, 
 {"symbol":"PEP","date":"2021-01-25","adj_close":140.18}, 
 {"symbol":"PG","date":"2021-01-26","adj_close":133.09}, 
 {"symbol":"HSY","date":"2021-01-26","adj_close":149.52}, 
 {"symbol":"CLX","date":"2021-01-26","adj_close":212.99}, 
 {"symbol":"COST","date":"2021-01-26","adj_close":364.98}, 
 {"symbol":"MDLZ","date":"2021-01-26","adj_close":57.59}, 
 {"symbol":"K","date":"2021-01-26","adj_close":60.92}, 
 {"symbol":"KHC","date":"2021-01-26","adj_close":34.39}, 
 {"symbol":"PEP","date":"2021-01-26","adj_close":141.8}, 
 {"symbol":"PG","date":"2021-01-27","adj_close":128.38}, 
 {"symbol":"HSY","date":"2021-01-27","adj_close":146.19}, 
 {"symbol":"CLX","date":"2021-01-27","adj_close":222.18}, 
 {"symbol":"COST","date":"2021-01-27","adj_close":356.39}, 
 {"symbol":"MDLZ","date":"2021-01-27","adj_close":56.42}, 
 {"symbol":"K","date":"2021-01-27","adj_close":62.36}, 
 {"symbol":"KHC","date":"2021-01-27","adj_close":34.74}, 
 {"symbol":"PEP","date":"2021-01-27","adj_close":138.04}, 
 {"symbol":"PG","date":"2021-01-28","adj_close":130.36}, 
 {"symbol":"HSY","date":"2021-01-28","adj_close":148.21}, 
 {"symbol":"CLX","date":"2021-01-28","adj_close":209.57}, 
 {"symbol":"COST","date":"2021-01-28","adj_close":357.06}, 
 {"symbol":"MDLZ","date":"2021-01-28","adj_close":57.12}, 
 {"symbol":"K","date":"2021-01-28","adj_close":60.17}, 
 {"symbol":"KHC","date":"2021-01-28","adj_close":33.96}, 
 {"symbol":"PEP","date":"2021-01-28","adj_close":139.19}, 
 {"symbol":"PG","date":"2021-01-29","adj_close":128.21}, 
 {"symbol":"HSY","date":"2021-01-29","adj_close":145.44}, 
 {"symbol":"CLX","date":"2021-01-29","adj_close":209.46}, 
 {"symbol":"COST","date":"2021-01-29","adj_close":352.43}, 
 {"symbol":"MDLZ","date":"2021-01-29","adj_close":55.44}, 
 {"symbol":"K","date":"2021-01-29","adj_close":58.94}, 
 {"symbol":"KHC","date":"2021-01-29","adj_close":33.51}, 
 {"symbol":"PEP","date":"2021-01-29","adj_close":136.57}, 
 {"symbol":"PG","date":"2021-02-01","adj_close":128.97}, 
 {"symbol":"HSY","date":"2021-02-01","adj_close":145.11}, 
 {"symbol":"CLX","date":"2021-02-01","adj_close":210.02}, 
 {"symbol":"COST","date":"2021-02-01","adj_close":350.52}, 
 {"symbol":"MDLZ","date":"2021-02-01","adj_close":55.25}, 
 {"symbol":"K","date":"2021-02-01","adj_close":58.82}, 
 {"symbol":"KHC","date":"2021-02-01","adj_close":33.25}, 
 {"symbol":"PEP","date":"2021-02-01","adj_close":136.98}, 
 {"symbol":"PG","date":"2021-02-02","adj_close":128.79}, 
 {"symbol":"HSY","date":"2021-02-02","adj_close":147.12}, 
 {"symbol":"CLX","date":"2021-02-02","adj_close":204.23}, 
 {"symbol":"COST","date":"2021-02-02","adj_close":355.58}, 
 {"symbol":"MDLZ","date":"2021-02-02","adj_close":56.16}, 
 {"symbol":"K","date":"2021-02-02","adj_close":58.45}, 
 {"symbol":"KHC","date":"2021-02-02","adj_close":33.16}, 
 {"symbol":"PEP","date":"2021-02-02","adj_close":138.38}, 
 {"symbol":"PG","date":"2021-02-03","adj_close":128.95}, 
 {"symbol":"HSY","date":"2021-02-03","adj_close":146.58}, 
 {"symbol":"CLX","date":"2021-02-03","adj_close":204.59}, 
 {"symbol":"COST","date":"2021-02-03","adj_close":355.21}, 
 {"symbol":"MDLZ","date":"2021-02-03","adj_close":55.28}, 
 {"symbol":"K","date":"2021-02-03","adj_close":58.01}, 
 {"symbol":"KHC","date":"2021-02-03","adj_close":33.01}, 
 {"symbol":"PEP","date":"2021-02-03","adj_close":138.02}, 
 {"symbol":"PG","date":"2021-02-04","adj_close":129.03}, 
 {"symbol":"HSY","date":"2021-02-04","adj_close":147.22}, 
 {"symbol":"CLX","date":"2021-02-04","adj_close":191.65}, 
 {"symbol":"COST","date":"2021-02-04","adj_close":355.85}, 
 {"symbol":"MDLZ","date":"2021-02-04","adj_close":56}, 
 {"symbol":"K","date":"2021-02-04","adj_close":57.87}, 
 {"symbol":"KHC","date":"2021-02-04","adj_close":32.92}, 
 {"symbol":"PEP","date":"2021-02-04","adj_close":139.68}, 
 {"symbol":"PG","date":"2021-02-05","adj_close":129.57}, 
 {"symbol":"HSY","date":"2021-02-05","adj_close":146.6}, 
 {"symbol":"CLX","date":"2021-02-05","adj_close":191.25}, 
 {"symbol":"COST","date":"2021-02-05","adj_close":355.17}, 
 {"symbol":"MDLZ","date":"2021-02-05","adj_close":56.21}, 
 {"symbol":"K","date":"2021-02-05","adj_close":58.03}, 
 {"symbol":"KHC","date":"2021-02-05","adj_close":33.8}, 
 {"symbol":"PEP","date":"2021-02-05","adj_close":140.96}, 
 {"symbol":"PG","date":"2021-02-08","adj_close":129.17}, 
 {"symbol":"HSY","date":"2021-02-08","adj_close":149.33}, 
 {"symbol":"CLX","date":"2021-02-08","adj_close":190}, 
 {"symbol":"COST","date":"2021-02-08","adj_close":359.83}, 
 {"symbol":"MDLZ","date":"2021-02-08","adj_close":56.02}, 
 {"symbol":"K","date":"2021-02-08","adj_close":57.74}, 
 {"symbol":"KHC","date":"2021-02-08","adj_close":33.91}, 
 {"symbol":"PEP","date":"2021-02-08","adj_close":140.4}, 
 {"symbol":"PG","date":"2021-02-09","adj_close":128.67}, 
 {"symbol":"HSY","date":"2021-02-09","adj_close":149.62}, 
 {"symbol":"CLX","date":"2021-02-09","adj_close":187.35}, 
 {"symbol":"COST","date":"2021-02-09","adj_close":359.56}, 
 {"symbol":"MDLZ","date":"2021-02-09","adj_close":55.5}, 
 {"symbol":"PEP","date":"2021-02-09","adj_close":139.6}, 
 {"symbol":"KHC","date":"2021-02-09","adj_close":33.71}, 
 {"symbol":"K","date":"2021-02-09","adj_close":57.64}]

score 1 · Accepted Answer

我已经重写了你的代码检查它是否适合你的情况

import React, { useState, useEffect } from "react";
import ChartistGraph from 'react-chartist';

export default function Graph() {
  const [data, setData] = useState({
    chart: {
      label: [],
      series: []
    },
    dataBySymbols: {},
    symbols: [],
    select: "",
  });

  const getData = () => {
    setTimeout(() => {
      const _tmp = new Set();
      const dataBySymbols = {};

      response.forEach(item => {
        _tmp.add(item.symbol);
        if (!dataBySymbols.hasOwnProperty(item.symbol)) {
          dataBySymbols[item.symbol] = {
            label: [],
            series: [
              []
            ]
          };
        }

        dataBySymbols[item.symbol]['label'].push(item.date);
        dataBySymbols[item.symbol]['series'][0].push(item.adj_close);
      });

      const copy = {...data};
      copy['dataBySymbols'] = dataBySymbols;
      copy['symbols'] = Array.from(_tmp);
      copy['chart'] = dataBySymbols[copy['symbols'][0]];

      setData(copy);
    }, 3000)
  }

  useEffect(() => {
    getData()
  }, [])

  function onSelectChange(evt) {
    const copy = {...data};
    copy['select'] = evt.target.value;
    copy['chart'] = copy.dataBySymbols[evt.target.value]
    setData(copy);
  }

  const options = {
    width: 500,
    height: 400
  };

  return (
    <div>
      <select value={data.select} onChange={onSelectChange}>
        {data.symbols.map(option => {
          return (
            <option key={option} value={option}>{option}</option>
          );
        })}
      </select>

      <ChartistGraph data={data.chart} options={options} type="Line" />
    </div>

  );
};

export default function App() {
  return (
    <Graph />
  );
}

这里的工作示例

score 1 · Accepted Answer

这是一个包含公司代码选择器的示例：

演示者.js：

export function Presentator() {
  const [data, setData] = useState([]);
  const [ticker, setTicker] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      /* DO ACTUAL FETCH FROM SERVICE */
      const result = await Promise.resolve(response);

      setData(result);
    }

    fetchData();
  }, []);

  const handleTickerChange = (event) => {
    setTicker(event.target.value);
  }

  const getTickerData = (ticker) => {
      return data.filter(item => item.symbol.toLowerCase() === ticker.toLowerCase());
  };

  const getTickerDropdownValues = () => {
    const set = new Set();

    data.forEach(item => {
      if (!set.has(item.symbol)) {
        set.add(item.symbol);
      }
    });

    return Array.from(set);
  }

  const getTickerDropdown = () => {
    const options = getTickerDropdownValues();

    return (
      <select value={ticker} onChange={handleTickerChange}>
        {options.map(option => {
          return (
            <option key={option} value={option}>{option}</option>
          );
        })}
      </select>
    );
  }

  return (
    <>
      {getTickerDropdown()}
      <Graph data={getTickerData(ticker)} />
    </>
  );
}

图.js：

export function Graph(props) {
  const { data } = props;

  const getChartData = () => {
    const labels = [];
    const series = [];

    data.forEach(item => {
      labels.push(item.date);
      series.push(item.adj_close);
    });

    return {
      labels: labels,
      series: [series]
    };
  }

  // Add your graph configuration here
  const chartOptions = {
    // width: 2000,
    height: 400,
    // scaleMinSpace: 20
  };

  return (
    <ChartistGraph data={getChartData()} options={chartOptions} type="Line" />
  );
}

基本上，Presentator处理数据的初始获取和按股票代码分割数据的逻辑。然后，该Graph组件处理特定代码数据本身的可视化。

您可以在此代码框检查一个工作示例。

您不需要在状态中存储比数据本身更多的东西。在我们的例子中，我们还存储了代码下拉列表的选定值。其他的都可以计算。

在该getChartData函数中，您可以对数据进行进一步的过滤和操作，例如仅显示最后 10 条记录（日期）而不是整个数据集。

score 1 · Accepted Answer

如果我理解正确，您需要显示adj_close每个日期的值，按symbol. 那是对的吗？

首先，更改您的状态：

  const [chartData, setChartData] = useState({
    labels: [],
    series: []
  });

您可以按如下方式对响应进行分组symbol：

const symbols = response.reduce((map, value) => {
        if (map.has(value.symbol)) {
          map.set(value.symbol, [...map.get(value.symbol), value]);
        } else {
          map.set(value.symbol, [value]);
        }
        return map;
}, new Map())

然后获取唯一日期：

const dates = [...new Set(response.map(r => r.date))]; // note: it doesn't sort dates!

然后构造系列多维数组。对于每个符号，您包含adj_close每个日期的值。


const series = Array.from(symbols).map(value => {
    const valuesForSymbol = value[1];
    return dates.map(date => {
      const valueForDate = valuesForSymbol.find(v => v.date === date);
      return valueForDate.adj_close;
    });
});

设置状态：

setChartData({labels: dates, series });

最后，像这样显示图表：

<ChartistGraph data={chartData} options={options} type="Line" />

完整的例子在这里。

javascript - React - 如何解析大型 JSON 对象以进行绘图。努力与国家这样做

3 回答 3

Related

Reference