是否有方法将图表js-plugin-瀑布作为一个反应组件来实现？

Question

我在这里面临着一种情况，包括React和chart.js库中的附加插件:chartjs-plugin-瀑布。

我必须为我的客户开发一个个性化的仪表板，到目前为止，我已经能够实现库图表及其反应组件所需的所有类型的图表: react chartjs-2。

但是，我现在已经为最后一个问题挣扎了好几个小时，我不得不实现-and，它不是一个“反应图组件”--瀑布图。为此，我决定添加chartjs插件-瀑布，并将其实现为一个新的图表(这里是一个代码示例)：

const WaterFallType = () => {
    let chart = false
    useEffect(() => {
        if(chart instanceof Chart) {
            chart.destroy();
        }
        let ctx = document.getElementById("myChart").getContext('2d')

        chart = new Chart(ctx, {
            type: "bar",
            plugins: [waterFallPlugin],
            data :{
                datasets: [
                  {
                    label: 'Closing Costs',
                    data: [50],
                    backgroundColor: '#e8cdd7',
                    stack: 'stack 1',
                  },
                  {
                    label: 'Purchase Price',
                    data: [700],
                    backgroundColor: '#d29baf',
                    stack: 'stack 1',
                  },
                  {
                    data: [200],
                    waterfall: {
                      dummyStack: true,
                    },
                    stack: 'stack 2',
                  },
                  {
                    label: 'Opening Loan Balance',
                    data: [550],
                    backgroundColor: '#bb6987',
                    stack: 'stack 2',
                  },
                  {
                    label: 'Initial Cash Investment',
                    data: [200],
                    backgroundColor: '#a53860',
                    stack: 'stack 3',
                  },
                ],
            },
            options: {
                plugins: {
                  waterFallPlugin: {
                    stepLines: {
                      enabled: true,
                      startColorStop: 0,
                      endColorStop: 0.6,
                      startColor: 'rgba(0, 0, 0, 0.55)',
                      endColor: 'rgba(0, 0, 0, 0)',
                      diagonalStepLines: true,
                    },
                  },
                },
            }
              
        })
    }, [chart])

    return <div>
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
}
export default WaterFallType

不幸的是，这段代码没有呈现组件，而是抛出了几个错误：

第一个：“不明错误:画布已经在使用。必须销毁ID为'2‘的图表，然后才能重用画布。”

第二个：“未定义的TypeError:无法设置未定义的属性(设置‘过滤器’)”

有人能帮我打这场仗吗？非常感谢你的帮助。

本杰明

Answer 1

终于找到了一个没有任何插件需要的解决方案。Chart.js允许浮动条：https://www.chartjs.org/docs/3.2.1/samples/bar/floating.html

这样就容易多了！

祝你今天过得愉快！