Chart.js隐藏数据标签并绘制指定样式水平参考线

功能实现说明 #

1. 隐藏顶部数据标签 #

若需隐藏图表顶部的数据集图例，在配置项中关闭图例显示即可；若目标是数据点上方的标签，需结合chartjs-plugin-datalabels插件配置隐藏规则。以下代码以隐藏图例为例：

在options.plugins中添加legend: { enabled: false }。

2. 绘制y=0的红色水平实线 #

使用chartjs-plugin-annotation插件的水平线注解功能，指定y轴值为0，设置实线样式与红色。

3. 绘制y=2.4的虚线平均线 #

同样通过chartjs-plugin-annotation插件添加水平线，指定y轴值为2.4，利用borderDash参数设置虚线样式。

完整修改代码 #

new Chart(canvas_id, {
    type: 'line',
    data: {
        datasets: [{
            data: dates,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        elements: {
            point: {
                radius: 0
            }
        },
        plugins: {
            tooltip: {
                enabled: false
            },
            // 隐藏顶部图例（数据集标签）
            legend: {
                enabled: false
            },
            // 配置注解插件
            annotation: {
                annotations: {
                    // y=0的红色实线
                    line_zero: {
                        type: 'line',
                        yMin: 0,
                        yMax: 0,
                        borderColor: 'red',
                        borderWidth: 2,
                        borderDash: [] // 实线无间隔
                    },
                    // y=2.4的虚线平均线
                    line_average: {
                        type: 'line',
                        yMin: 2.4,
                        yMax: 2.4,
                        borderColor: '#666', // 自定义颜色
                        borderWidth: 2,
                        borderDash: [5, 5] // 虚线线段长度与间隔
                    }
                }
            }
        }
    },
    // 注册注解插件
    plugins: [ChartAnnotation]
});

注意事项 #

• 需提前引入chartjs-plugin-annotation插件才能使用水平线注解功能；
• 若要隐藏数据点标签而非图例，需引入chartjs-plugin-datalabels插件，并在options.plugins.datalabels中设置display: false；
• 虚线样式可通过调整borderDash数组值自定义，如[3,3]对应更密集的虚线。

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