使用按钮在带有 vue-chartjs 和 nuxt 的图表之间切换

如何解决使用按钮在带有 vue-chartjs 和 nuxt 的图表之间切换

关于如何使用 vue-chartjs 和 nuxt 构建折线图，我看到的很多内容与我看到的其他实现有很大不同。

基本上我想通过听哪个按钮被点击来在两个图表之间切换。按钮的 html 不是我遇到的问题，但看起来像这样，供参考：

<line-chart id="myChart"/>
<button id="0" type="btn">Monthly</button>
<button id="1" type="btn">Daily</button>

JavaScript 对我来说有点困惑。我使用本指南作为基线，并且有基线。 https://stackoverflow.com/a/54412298/8514082

在其中，他们建议添加事件侦听器，然后基于此更新图表。

问题是，由于 nuxt 的工作原理，该指南基本上与我在第一步中所做的有所不同。我尝试添加侦听器并更新已安装的图表，但进展不顺利。

import { Line } from 'vue-chartjs'

const monthlyData = {
    labels: ['January','February','march','April','May','June','July'],datasets: [
    {label: 'Data1',backgroundColor: '#0000',data: [40,39,31,11,45,50,34]},{label: 'Data2',data: [34,40,50]},{label: 'Data3',data: [50,34,45]},{label: 'Data4',data: [45,11]}
]}

const dailyData = {
    labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],data: [8,5,9,1,4,4]},data: [3,3,8,5]},data: [7,6,2,7,8]},data: [1,10,15,4]}
]}


// add event listeners for the buttons
document.getElementById("0").addEventListener('click',() => {
    const chart = document.getElementById("myChart")
    chart.data = monthlyData
    chart.update()
})
  
document.getElementById("1").addEventListener('click',() => {
    const chart = document.getElementById("myChart");
    chart.data= dailyData;
    chart.update();
})


export default {
    
    extends: Line,data () {
        return {
            options: {
                responsive: true,maintainAspectRatio: false
            }
        }
    },mounted () {
        this.renderChart(monthlyData,this.options)
    }
}

这会引发引用错误：“文档未定义”，这只是第一步，我不确定下一步应该是什么。

知道我可以做些什么来让 vue-chartsjs 在按下按钮时更新其显示吗？