React（react2chartjs）中的chartjs-plugin-datasource实现

Question

正如标题所示，我正在尝试从Excel导入数据，并使用ChartJs将其显示为图表。基于这个问题有一个想法：（Import data from Excel and use in Chart.js）并使它起作用。

但是我现在想做的是使用react2chartjs在React中实现这一点。但是这样做失败，未定义错误“ ChartDataSource”。当我确实这样定义它时：-

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;

Answer 1

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

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

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