导入chartjs插件注解

mbzjlibv  于 2022-12-26  发布在  Chart.js
关注(0)|答案(1)|浏览(183)

导入chartjs插件注解时出现流动错误

Uncaught TypeError: t.defaults.describe is not a function
    at chartjs-plugin-annotation.min.js:7:22552
    at Array.forEach (<anonymous>)
    at chartjs-plugin-annotation.min.js:7:22528
    at chartjs-plugin-annotation.min.js:7:298
    at chartjs-plugin-annotation.min.js:7:325

我使用的是2.1.0版和chartjs 4.1.1版

<!-- chart.js -->
<script src="{{ url('/assets/plugins/chart.js/Chart.min.js') }}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.0/chartjs-plugin-annotation.min.js"></script>

注解插件包含在图表选项中:chartjs的代码如下.我使用laravel作为框架

const hoursChart = document.getElementById('busiest-hours-chart').getContext('2d');
    const arrayOfreservationHours = {{ Js::from($countreservationHours) }};
    const annotation = {
        type: 'line',
        borderColor: 'black',
        borderDash: [6, 6],
        borderDashOffset: 0,
        borderWidth: 3,
        label: {
            enabled: true,
            content: 'aaa',
            position: 'end'
        },
        scaleID: 'y',
        value: 111
    };
    new Chart(hoursChart, {
        type: 'bar',
        data: {
            labels: Object.keys(arrayOfreservationHours),
            datasets: [{
                data:  Object.values(arrayOfreservationHours),
                borderWidth: 1,
                backgroundColor: '#9BD0F5',
            }]
        },
        options: {
            plugins: {
                annotation: {
                    annotations: {
                        annotation
                    }
                }
            },
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

chartjs工作正常。

有什么建议吗?

2nbm6dog

2nbm6dog1#

刚刚发现我已经在我的项目的其他地方导入了另一个版本的chartjs。解决了这个冲突后,插件工作正常。

相关问题