React 中的 chartjs-plugin-datasource 实现 (react2chartjs)答案

【问题标题】：chartjs-plugin-datasource implementation in React (react2chartjs)React 中的 chartjs-plugin-datasource 实现 (react2chartjs)
【发布时间】：2020-04-08 14:25:56
【问题描述】：

正如标题所示，我正在尝试从 Excel 导入数据并使用 ChartJs 将其显示为图表。根据这个问题得到了一些想法：(Import data from Excel and use in Chart.js) 并让它发挥作用。

但我现在要做的是使用 react2chartjs 在 React 中实现这一点。但未能这样做，得到错误'ChartDataSource' is not defined。当我确实这样定义它时：-

import ChartDataSource from 'chartjs-plugin-datasource';

错误存在，但图表不显示任何信息有什么想法吗？。

代码



import React, {Component} from "react";
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datasource';

class Chart extends Component {
    constructor(props){
        super(props);
        this.state = {
            chartData:{
                datasets: [
                    {
                    hoverBorderWidth:5,
                    hoverBorderColor:'black',
                    pointStyle: 'rect',
                    backgroundColor:'green'
                    //backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
                    },
                    {
                    hoverBorderWidth:5,
                    hoverBorderColor:'black',
                    pointStyle: 'rect',
                    backgroundColor:'red'
                    //backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
                    }

                ]
            }
        }
    }

    render() {
        const option = {
            title:{
                display:true,
                text: 'Test Chart',
                fontSize:23,
            },
            legend:{
                display:true,
                position:'top',
                labels:{
                    fontColor:'Black',
                    usePointStyle: true
                }
            },
            layout:{
                padding:{
                    left:0,
                    right:0,
                    bottom:0,
                    top:0
                }
            },
            tooltips:{
                enabled:true
            },
            scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                        }
                    }]
            },

            plugins: {
                datasource: {
                url: 'Book1.xlsx',
                rowMapping: 'index'
                }
            }
        }

        return (
            <div className="Chart">
                <Bar
                    data={this.chartData}
                    options={option}
                    plugins={ChartDataSource}
                />
            </div>
        )
    }
}

export default Chart;

【问题讨论】：

我想要做的基本上就是这个教程，而是从 excel 中读取数据。 youtube.com/watch?v=Ly-9VTXJlnA

标签： javascript reactjs implementation

【解决方案1】：

我知道这是旧的，但以防其他人来这里遇到类似的问题。

   <Bar
          data={chartData}
          plugins={[ChartDataSource]}// pass as array
          options={option}
        />

而url: 'Book1.xlsx' 表示您在Your project\public\Book1.xlsx 中有Book1.xlsx

【讨论】：