Chart.js报错'ShowChart()bar'不是有效图表类型的问题求助

数据老陈

2026-5-15

解决Chart.js图表类型报错的问题

Hey there! Let's fix this error you're seeing. The root cause is super straightforward:

问题根源

你在ShowChart()函数里把图表类型错误地写成了'ShowChart()bar'——这明显是个手误，把函数名和合法的图表类型'bar'拼在一起了。Chart.js只识别内置的标准类型（比如'bar'、'line'、'pie'、'doughnut'等），'ShowChart()bar'完全不在它的合法类型列表里，所以控制台才会抛出'ShowChart()bar' is not a chart type的错误。

修正步骤

打开你的ShowChart()函数代码，找到初始化Chart的那段代码
将错误的type: 'ShowChart()bar'替换为合法的类型，比如type: 'bar'

修正后的示例代码

function ShowChart() {
  // 获取模态框里的canvas元素
  const chartCanvas = document.getElementById('chart-modal-canvas').getContext('2d');
  
  // 初始化图表，注意type的正确写法
  new Chart(chartCanvas, {
    type: 'bar', // 这里是正确的图表类型
    data: {
      labels: ['一月', '二月', '三月', '四月'],
      datasets: [{
        label: '月度数据',
        data: [12, 19, 3, 5],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}