Storybook - 通过控件更改 chartjs 值

问题描述

我正在使用 react storybook，我想在上面展示我的 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"],borderWidth: 1,borderRadius: 10,data: [1000,1100,1050,1070,900,950,1200,1200],{
            label: 'Planned Connections per Month',stack: 'Stack 1',backgroundColor: ["#EAB04B","#EAB04B","#EAB04B"],data: [1100,1000,1350,1270,800,}
    ]
};


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>

        )
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）