reactjs - Storybook - 通过控件更改 chartjs 值

Question

我正在使用反应故事书，我想在上面展示我的 chartjs 图表，还允许我的用户通过改变值和观看图表更新（在这种情况下，更改我的条形图边框半径）来通过故事书控件来玩图表配置没有它打破。

但是每当我与控件交互时，我都会遇到这个问题：

仅当我执行软刷新时图表值才会更改

这是我的代码：

Chart.stories.js

import React from 'react';
import Chart from '../components/Chart';

const charts = {
    title: '_Components/Charts',
    parameters: {
        docs: { 
            description: { 
                component: `All these charts are built off <a href="https://www.chartjs.org/">chart.js </a>.  
                When using, pull in component and set type to either <code>doughnut</code>, <code>bar</code>, <code>line</code>, <code>area</code> or <code>pie</code> and then assign your own data and options objects to the component props, respectively <code>data={exampleData}</code> and <code>options={exampleOptions}</code>    
                NPM packages required:  
                1. <code>react-chartjs-2</code>  
                2. <code>chartjs-plugin-datalabels</code>  
                `
  
            },
        },
      },
    component: Chart,
    argTypes :{
      borderRadius:{
        control:{
            type: 'range',
            min:0,
            max:50,
          },
          description: 'sets bar chart border radius'
      },

    }
  };

export default charts;

const Template = (args) => <Chart {...args} />;
const barData = {
    labels: ['Jan-19', 'Feb-19', 'Mar-19', 'April-19', 'May-19', 'June-19', 'Jul-19', 'Aug-19', 'Sept-19', 'Oct-19', 'Nov-19', 'Dev-19'],
    datasets: [
        {
            label: 'Actual Connections per Month',
            stack: 'Stack 0',
            backgroundColor: ["#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE", "#4A91CE"],
            borderWidth: 1,
            borderRadius: 10,
            data: [1000, 1100, 1050, 1070, 900, 950, 1200, 1200, 1200, 1200, 1200, 1200],
        },
        {
            label: 'Planned Connections per Month',
            stack: 'Stack 1',
            backgroundColor: ["#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B", "#EAB04B"],
            borderWidth: 1,
            data: [1100, 1000, 1350, 1270, 800, 1050, 1000, 1200, 1200, 1200, 1200, 1200],
        }
    ]
};


export const Bar = Template.bind({});
Bar.args = {
   type: 'bar',
   data: barData,
   //options: barOptions,
   chartLabels:"bar labels",
   titleDisplay:true,
   legendPosition:'top',
   legendDisplay:true,
   titlePosition:'top',
   text:'testing text',
   titleFont:'18',
   datalabelsDisplay:false,
         
};

这是我的 Chart.js

import React, { Component } from 'react';
import { Bar, Doughnut, Pie, Line } from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
import PropTypes from 'prop-types';
import { Chart as ChartJS } from 'react-chartjs-2';

export default class Chart extends Component {
    constructor(props){
        super(props);
        this.state = {
            place:"", 
            barOptions : {
                cornerRadius: this.props.borderRadius,
                legend: {
                    display: this.props.legendDisplay,
                    position: this.props.legendPosition
                },
                plugins: {
                    datalabels: {
                        display: this.props.datalabelsDisplay,
                    }
                },
                title: {
                    display: this.props.titleDisplay,
                    text: this.props.text,
                    position: this.props.titlePosition,
                    fontSize: this.props.titleFont,
                    paddingRight: 15
                },
                maintainAspectRatio: true,
                scales: {
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            borderDash: [this.props.borderdashSpaceBetween, this.props.borderdashSpaceBetween],
                            color: "black",
                        },
                        ticks: {
                            fontSize: 12,
                            fontStyle: 900,
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            steps: this.props.steps,
                            stepSize: this.props.stepSize,
                            max: this.props.max,
                            min: this.props.min,
                        },
                    }]
                },
            },    
          }
    
    }



    render() {

        return (
            <div className="chart">

                <Bar data={this.props.data} options={this.state.barOptions} />
            </div>

        )
    }
}