首页 > 解决方案 > Excel 数据到 chart.js

问题描述

我目前正在尝试根据一个 excel 文件制作天气数据图表。

但我对节点和反应完全陌生。

我设法将excel数据转换为json:

var xlsx = require("xlsx");

var wb = xlsx.readFile('data.xlsx',{cellDates:true});

var ws = wb.Sheets["paris_weather"];

var data_json = xlsx.utils.sheet_to_json(ws);

console.log(data_json);

在一个名为“getdata.js”的文件中。

在我的 index.js 中,我想导入那个 json 变量,但我不知道怎么做。

index.js:

import Head from 'next/head'
import chart from 'chart.js'
import React from 'react';
import {Bar} from 'react-chartjs-2';
import xlsx  from 'xlsx';

import {data_json} from './getdata.js'

const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)',
  'rgba(255, 206, 86, 0.2)',
  'rgba(75, 192, 192, 0.2)',
  'rgba(153, 102, 255, 0.2)',
  'rgba(255, 159, 64, 0.2)'
],
borderColor: [
  'rgba(255, 99, 132, 1)',
  'rgba(54, 162, 235, 1)',
  'rgba(255, 206, 86, 1)',
  'rgba(75, 192, 192, 1)',
  'rgba(153, 102, 255, 1)',
  'rgba(255, 159, 64, 1)'
],
borderWidth: 1

}] }

导出默认函数 Home() { return (

条形示例(自定义尺寸)

<条形数据={数据} 宽度={400} 高度={200} 选项={{ 维护AspectRatio: false }} /> ) }

 console.log(data_json);

当我想导入我的 json_data 时出现以下错误:

在此处输入图像描述

索引中的 const 数据只是为了测试我是否可以显示折线图,我知道我必须将其调整为我的 json 数据或 excel 数据,但我没有找到如何首先导入我的 json。

任何人都可以帮助我吗?

有没有一种简单的方法来创建基于 excel 文件的图表而不将其转换为 JSON?

谢谢,亚历克斯

标签: jsonreactjsexcelchart.js

解决方案


推荐阅读