json - 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?
谢谢,亚历克斯
解决方案
推荐阅读
- html - Change CSS attribute with TypeScript and Angular
- python - 图像仅显示在第一个按钮上
- maven - Jakarta EE,使用 Visual Studio Code 的 Maven?
- python - Bootstrap 网格不适用于 Flask 设置
- java - 使用最近的客户端 RestHighLevelClient 7.12.1 调用旧版本 ElasticSearch exp :6.8.8
- javascript - Javascript Signalr 客户端在网络服务器的 webworker 线程中运行
- python - Pandas Groupby 并应用 ROC_AUC_SCORE 错误
- google-bigquery - 在 BigQuery 中从 JSON 文件创建分区表
- flutter - 如何在 Flutter CheckboxListTile 中设置 HTML 等值?
- tensorflow - 我可以用于深度学习的最佳 IDE 是什么?