使用静态数据的Chart.js图表在Vue项目中无法渲染问题求助

问题根因 #

图表渲染失败有两个核心原因：

1. charts.js代码在页面加载时就执行，而图表容器通过v-if="graphToggle"控制显隐，初始状态graphToggle为false，对应DOM节点不存在，document.getElementById无法获取到canvas元素，初始化直接失败。
2. 你将`放在Vue管控的动态DOM内部，Vue更新DOM时会直接忽略内嵌的script标签，不会执行其中的代码。

修改步骤 #

1. 调整HTML结构

• 将Chart.js库的引入标签移到Vue挂载的#tasks容器外部，保证库提前加载完成。
• 移除v-if包裹区域内的<script src="charts.js"></script>标签，不要在Vue管控的DOM节点中插入script标签。

2. 修改Vue实例代码调整

首先在data中新增变量存储图表实例，避免重复初始化：

data(){
  return{
    // 原有其他变量保持不变
    lineChart: null,
    pieChart: null
  }
}

在methods中新增图表初始化方法，将原charts.js的所有逻辑移入该方法：

initCharts() {
  // 已初始化过则直接返回，避免重复创建实例
  if(this.lineChart && this.pieChart) return
  let userStatsLine = document.getElementById("lineChart").getContext("2d");
  let groupStatsPie = document.getElementById("pieChart").getContext("2d");

  this.lineChart = new Chart(userStatsLine, {
    // 原折线图配置完全不变，直接复制即可
    type:'line',
    data:{
        labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Nov','Oct','Dec'],
        datasets:[{
            label:'Individual Total Completions',
            data:[1,2,2,4,5,7,8,10,13,17,18,20],
            backgroundColor:'#7fbaf1',
            borderColor:'#7fbaf1',
        }, {
            label:'Average Total Completions',
            data:[1,3,4,6,7,9,11,14,18,19,21,23],
            backgroundColor:'#3b81c1',
            borderColor:'#3b81c1',
        }, {
            label:'Completions Per Month',
            data:[1,1,0,2,1,2,1,2,5,4,1,2],
            backgroundColor:'#f2fa96',
            borderColor:'#f2fa96',
        }, {
            label:'Average Completions Per Month',
            data:[1,2,1,2,3,2,1,2,3,3,2,3],
            backgroundColor:'#aab062',
            borderColor:'#aab062',
        }],
    },
    options:{
        responsive:true,
        maintainAspectRatio: false,
        scales: {
            x: {
                ticks: {
                    color: "grey"
                },
                grid: {
                    color: "#404040"
                }
            },
            y: {
                ticks: {
                    color: "grey"
                },
                grid: {
                    color: "#404040"
                }
            }
        }
    }
  });

  const names = ['Incomplete','Sally','Thomas','Ansh','Edmund'];
  this.pieChart = new Chart(groupStatsPie, {
    // 原饼图配置完全不变，直接复制即可
    type:'doughnut',
    data:{
        labels: names,
        datasets:[{
            label:'Individual Total Completions',
            data:[33,21,11,25,20],
            backgroundColor: names.map((l, i) => i ? '#7fbaf1' : '#f2fa96'),
            borderColor:names.map((l, i) => i ? '#3b81c1' : '#aab062'),
            weight: 0.6 
        }],
    },
    options:{
        responsive:true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
              labels: {
                generateLabels: () => [{
                  text: 'Incomplete',
                  fillStyle: '#f2fa96',
                  strokeStyle: '#aab062',
                },
                {
                  text: 'Complete',
                  fillStyle: '#7fbaf1',
                  strokeStyle: '#3b81c1',
                }]
              }
            }
          }
    }
  });
}

修改toggleGraph方法，在DOM渲染完成后再初始化图表：

toggleGraph() {
  this.graphToggle = !this.graphToggle;
  const temp = this.graphIcon;
  this.graphIcon = this.tempIcon;
  this.tempIcon = temp;
  // 打开图表时调用初始化方法，$nextTick确保DOM已经渲染完成
  if(this.graphToggle) {
    this.$nextTick(() => {
      this.initCharts()
    })
  } 
  // 可选：关闭图表时销毁实例，下次打开重新渲染
  else {
    if(this.lineChart) {
      this.lineChart.destroy()
      this.pieChart.destroy()
      this.lineChart = null
      this.pieChart = null
    }
  }
}

内容的提问来源于stack exchange，提问作者Darcy Power