reactjs - 我想使用 D3 和 Chartjs 在 React 中绘制前 100 行本地 CSV

Question

import React ,{ useEffect,useState } from 'react'
import {Bar,Line,Bubble,Radar,Doughnut} from 'react-chartjs-2'
import Hbl_true from './Datasets/true.csv'
import Hbl_pred from './Datasets/pred.csv'
import * as d3 from 'd3';



const Barchart=(props)=> {




    var hbl_true=[]
    var hbl_pred=[]
    var date=[]
    var pie_true=[]
    
    useEffect(()=>{

        d3.csv(props.true, function(CSV) {  
            hbl_true.push(CSV.True)//true stock prices
            date.push(CSV.Date)//dates pushed 
          });

         d3.csv(props.preds, function(CSV) {  
            hbl_pred.push(CSV.Predicted)//predicted stock prices
          });

    })


    return <div>
        <div className="block-example border border-primary" style={{display:'flex',justifyContent:"center", alignItems:"center",marginTop:"50px"}} >
    
    {/* this is a Line Chart */}
    <div>
    <Line
    height={400}
    width={600}
    options={{maintainAspectRatio:false}}
    data={{
        labels:date,
        datasets:[
            {
                label: 'True Prices',
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'red',
                borderWidth: 2,
                lineTension: 0,
                pointRadius:0,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data:hbl_true,
                fill:false
            },
            {
                label: 'Predicted Prices',
                data:hbl_pred,
                fill:false,
                pointRadius:0,
                backgroundColor: 'green',
                borderColor: 'green',
                borderWidth: 3,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                
            }
        ]
    }}
    />
    </div>
    </div>
}
export default Barchart

上面的代码绘制了 1000 行的整个 CSV，但我只想加载 CSV 的前 100 行并通过chartsJS 绘制它们。

请帮助我只获取 100 行本地 csv 并绘制它们。

我使用 useEffect 通过 D3 加载 CSV。

有没有办法在加载或仅加载 100 行而不是所有行后对其进行切片？

标签： reactjscsvd3.jsuse-effectreact-chartjs