如何在Chart.js图表中正确显示自定义标题？

你的代码存在两处关键错误，修正后即可正常显示自定义标题：

1. 前端Chart.js标题插件名称拼写错误 #

Chart.js的标题插件官方名称为title，你写成了德语拼写的titel，导致配置未被识别。修改前端代码的plugins配置段：

原错误代码：

plugins: {
    legend: {position: 'top',},
    titel: {display: true, text: '%titel%'},
},

修正后：

plugins: {
    legend: {position: 'top',},
    title: {display: true, text: '%titel%'}, // 修正为正确的插件名称title
},

2. 后端模板变量传递错误 #

后端代码中，'%titel%' => '$label_titel'里的'$label_titel'是字符串字面量，不会被解析为变量值，需要去掉引号直接使用变量：

原错误代码：

text('Diagramm ABC Handy', array(
  '%titel%' => '$label_titel',
  '%labels%' => json_encode($label_data),
  '%ownData%' => json_encode($value_data)
));

修正后：

text('Diagramm ABC Handy', array(
  '%titel%' => $label_titel, // 去掉引号，传递变量的实际值
  '%labels%' => json_encode($label_data),
  '%ownData%' => json_encode($value_data)
));

可选：标题样式优化 #

如果需要调整标题的显示样式，可以在title配置中添加更多属性，示例如下：

title: {
    display: true,
    text: '%titel%',
    font: {
        size: 16,
        weight: 'bold'
    },
    padding: {
        bottom: 20
    },
    color: '#333'
}

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