Javascript 如何在ReactJS中扩展chartjs折线图以同时显示实线和虚线？

我想在REACT JS中使用ChartJS类似于“”，一起画实线和虚线。我无法理解如何在react js文件中扩展图表，因为很难获得上下文（ctx）。我理解基本概念，但无法在React组件上实现

下面是我的折线图实现，我认为这是一个糟糕的实现

import Chart from 'chart.js';

class LineChart extends React.Component {
    constructor(props) {
        super(props);
        this.canvasRef = React.createRef();
    }

  componentDidMount() {
    this.myChart = new Chart(this.canvasRef.current, {
        type: 'line',
        options: {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            legend:{
                display:false,
            },
            scales: {
                x: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                },
                y: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }
            }
        },
        data: {
            labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
            datasets: [{
                label: "My First dataset",
                data: [1, 8, 3, 4, 2, 3, 4],
                borderColor: '#66f',
                borderDash: [20, 30],
                pointBackgroundColor: "transparent"
            },{
                label: "My Dotted dataset",
                data: [null, null, null, null, null, null, 4, 7, 5, 3, 2],
                borderColor: '#66f',
                pointBackgroundColor: "transparent"
            }]
        }
        });
    }


    render() {
        return (
             <div className="chart-section">
                <div className="chart-body">
                    <canvas ref={this.canvasRef} />
                </div>
            </div>
        ) 
    }
}

export default LineChart;```

从“Chart.js”导入图表；
类折线图扩展了React.Component{
建造师（道具）{
超级（道具）；
this.canvasRef=React.createRef（）；
}
componentDidMount（）{
this.myChart=新图表（this.canvasRef.current{
键入：“行”，
选项：{
回答：是的，
工具提示：{
模式：“索引”，
交集：错，
},
悬停：{
模式：“最近的”，
交集：对
},
图例：{
显示：假，
},
比例：{
x:{
显示：对，
scaleLabel：{
显示：对，
标签串：“月”
}
},
y:{
显示：对，
scaleLabel：{
显示：对，
标签字符串：“值”
}
}
}
},
数据：{
标签：['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H'，'I'，'J'，'K']，
数据集：[{
标签：“我的第一个数据集”，
数据：[1,8,3,4,2,3,4]，
边框颜色：“#66f”，
borderDash:[20,30]，
pointBackgroundColor:“透明”
},{
标签：“我的虚线数据集”，
数据：[null，null，null，null，null，null，4，7，5，3，2]，
边框颜色：“#66f”，
pointBackgroundColor:“透明”
}]
}
});
}
render（）{
返回(
) 
}
}
导出默认线形图```

您可以使用react-chartjs-2，它为react实现了chart.js，当选项和数据集与chart.js中的一样时，您可以像任何常规react组件一样调用它。

但它不会解决我的问题。我需要把实线和虚线放在一起。如果没有React-Chartjs-2中的扩展，这是不可能的。我不知道如何扩展图表来制作自定义图表。在新版本的chartjs中有插件支持，您也可以将插件与React-chartjs-2一起使用（如此处所示）。在插件函数中，你可以得到带有ctx字段的图表对象——我不确定它是否足够好。