ChartJS 使用变量传入配置创建新图表不渲染问题问询

正确实现方式 #

ChartJS完全支持将配置抽成独立变量传入构造函数，正确写法如下：

首先将完整的图表配置项赋值给独立变量，内容和你直接写在构造函数内的第二个参数完全一致：

const chartConfig = {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        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)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
  },
  options: {
      scales: {
          y: {
              beginAtZero: true
          }
      }
  }
}

实例化图表时直接传入该变量即可，不需要做任何额外的括号包裹操作：

new Chart(myCanvas, chartConfig)

空白问题排查 #

你遇到无报错但图表空白的问题，基本都是因为传入参数时多做了额外的包裹操作，常见错误写法如下：

• 给变量额外套了一层对象括号，比如写成 new Chart(myCanvas, { chartConfig })，这相当于给配置对象顶层多了一个chartConfig属性，ChartJS无法识别对应字段导致无法渲染
• 配置变量的结构有拼写错误，比如type、data、options等顶层字段拼写错误，或者层级错误

内容的提问来源于stack exchange，提问作者Stephan Young