ChartJS配置title后不显示 Node-RED仪表盘图表问题排查

核心原因 #

你的代码使用的是Chart.js 2.x版本的配置语法，而Node-RED Dashboard内置的Chart.js为3.x及以上版本，跨大版本的配置语法不兼容导致整个options配置解析异常：

• v3版本废弃了旧版scales.xAxes/scales.yAxes的数组配置写法，错误的scales节点会中断配置解析，导致title插件配置根本没有被加载
• v3版本中标题的颜色属性不再直接挂载在title对象下，需要嵌套在title.font对象内，直接写color参数无法被识别
• 你之前排查的CSS遮挡、布局边距问题不成立，因为配置解析失败时根本不会渲染标题对应的DOM元素，自然调整样式无效。

修复方案 #

将配置替换为兼容Chart.js 3.x的写法，修正后的完整代码如下：

<script>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900','#755800']

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    options: {
        // 修正标题配置，适配v3语法
        plugins: {
            title: {
                display: true,
                text: 'Difference between temp ext and temp in',
                font: {
                    size: 14,
                    color: '#000000'
                },
                padding: {
                    top: 8,
                    bottom: 12
                }
            }
        },
        // 替换为v3版本的scales对象结构，不再使用xAxes/yAxes数组写法
        scales: {
            'left-y-axis': {
                grid: {color: '#ffffff'},
                type: 'linear',
                position: 'left',
                ticks: {
                    color: linecolors[0]
                }
            },
            'right-y-axis': {
                grid: {borderColor: '#ffffff', color: '#000000', lineWidth: 0.1},
                type: 'linear',
                position: 'right',
                ticks: {
                    color: linecolors[1]
                }
            },
            x: {
                grid: {borderColor: '#000000', color: '#000000', lineWidth: 0.1},
                type: 'time',
                ticks: {
                    color: '#000000'
                }
            }
        },
        // 显式预留标题位置，避免布局挤压
        layout: {
            padding: {
                top: 10
            }
        }
    },
    data: {
        labels: [],
        datasets: [
            {
                label: 'First',
                backgroundColor: linecolors[0],
                borderColor: linecolors[0],
                data: {{{payload.first}}},
                yAxisID: 'left-y-axis',
                stepped: false,
                fill: false,
                borderWidth: 3,
                radius:0,
            },
            {
                label: 'Second',
                backgroundColor: linecolors[1],
                borderColor: linecolors[1],
                data: {{{payload.second}}},
                yAxisID: 'left-y-axis',
                stepped: false,
                fill: false,
                borderWidth: 3,
                radius:0,
            },
            {
                label: 'Third',
                backgroundColor: linecolors[2],
                borderColor: linecolors[2],
                data: {{{payload.third}}},
                yAxisID: 'right-y-axis',
                stepped: false,
                fill: false,
                borderWidth: 3,
                radius:0,
            }
        ]
    },
});
</script>

修复效果验证 #

替换代码后，不仅标题会正常显示，你之前配置的双Y轴刻度颜色、网格线透明度效果也会同步生效，解决当前截图中坐标轴样式不符合预期的问题。

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