在 react-vis 中绘制导入的 csv 数据

问题描述

问题 1 当我使用 console.log(JSON.strigify(data,null,2) 时，它为我提供了 index.html 输出而不是 csv 数据。这是为什么？谁能给我解释一下？

问题 2 我需要一些帮助，将导入的 CSV 数据绘制成一个简单的折线图和一个使用 react-vis 或任何其他可用包导入的散点图。 CSV 文件包含 2 列，标题为“地面”和“预测”

我的 App.js 有以下代码

import React from 'react';
import { useState } from 'react';
import * as XLSX from 'xlsx';
import DataTable from 'react-data-table-component';
import {XYPlot,XAxis,YAxis,VerticalGridLines,HorizontalGridLines,AreaSeries} from 'react-vis';
function MetricAnalysis() {
const [columns,setColumns] = useState([]);
const [data,setData] = useState([]);

// process CSV data
const processData = dataString => {
    const dataStringLines = dataString.split(/\r\n|\n/);
    const headers = dataStringLines[0].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);

    const list = [];
    for (let i = 1; i < dataStringLines.length; i++) {
        const row = dataStringLines[i].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);
        if (headers && row.length == headers.length) {
            const obj = {};
            for (let j = 0; j < headers.length; j++) {
                let d = row[j];
                if (d.length > 0) {
                    if (d[0] == '"')
                        d = d.substring(1,d.length - 1);
                    if (d[d.length - 1] == '"')
                        d = d.substring(d.length - 2,1);
                }
                if (headers[j]) {
                    obj[headers[j]] = d;
                }
            }

            // remove the blank rows
            if (Object.values(obj).filter(x => x).length > 0) {
                list.push(obj);
            }
        }
    }

    // prepare columns list from headers
    const columns = headers.map(c => ({
        name: c,selector: c,}));

    setData(list);
    setColumns(columns);
}

// handle file upload
const handleFileUpload = e => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (evt) => {
        /* Parse data */
        const bstr = evt.target.result;
        const wb = XLSX.read(bstr,{ type: 'binary' });
        /* Get first worksheet */
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        /* Convert array of arrays */
        const data = XLSX.utils.sheet_to_csv(ws,{ header: 1 });
        processData(data);
    };
    reader.readAsBinaryString(file);
}

return (

    <div>
        <div>
            /* Graph Here */
        </div>

        <h3>Import device csv file for analysis</h3>
        <input
            type="file"
            accept=".csv,.xlsx,.xls"
            onChange={handleFileUpload}
        />
        <DataTable
            pagination
            highlightOnHover
            columns={columns}
            data={data}
        />
    </div>
);

}

导出默认指标分析；

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）