Chart.js 2.7.1图例无align配置项 如何添加对齐设置

Chart.js 2.7.1 确实没有内置legend.align配置项，这个配置是后续v2.9之后的版本才新增的，不需要死磕内置配置，下面两种方案都可以稳定实现图例居中，完美适配2.7.1版本。

方案1：默认配置+CSS修正（成本最低，保留原生交互） #

首先补全你现有的全局图例配置，不需要加不存在的align字段，保留原有参数即可：

defaults._set('global', {
    legend: {
        display: true,
        position: 'bottom',
        fullWidth: true,
        reverse: false,
        weight: 1000,
        labels: {
            padding: 15
        }
    }
})

2.7.1版本默认生成的底部图例偏左，核心原因是图例列表项默认带左浮动属性，脱离了普通文档流，给画布父容器加一段CSS强制修正布局即可：

/* 选中Chart.js自动生成的图例容器 */
.chartjs-legend {
    width: 100% !important;
    text-align: center;
}
/* 清除列表默认浮动，改成行内块实现自动居中 */
.chartjs-legend ul {
    display: inline-block !important;
    float: none !important;
    padding: 0;
    margin: 10px 0 0 0;
}
.chartjs-legend li {
    float: none !important;
    display: inline-block !important;
    margin: 0 8px;
}

加完这段CSS之后，原生图例的点击显隐、样式渲染逻辑完全保留，不需要额外写JS，对齐效果和高版本加align:'center'完全一致。

方案2：自定义图例模板（可控性最高，适合定制化场景） #

如果不想写CSS覆盖默认样式，可以用2.7.1原生支持的legendCallback参数自定义图例渲染逻辑，从结构上直接实现居中：

defaults._set('global', {
    legend: {
        display: false, // 关掉默认图例渲染，用自定义生成的内容
        position: 'bottom',
        fullWidth: true,
        reverse: false,
        weight: 1000,
        legendCallback: function(chart) {
            let legendHtml = '<div style="width:100%;text-align:center;margin-top:12px;">';
            legendHtml += '<ul style="list-style:none;padding:0;margin:0;display:inline-block;">';
            // 遍历数据集生成图例项
            chart.data.datasets.forEach((dataset, datasetIndex) => {
                const color = dataset.backgroundColor ? (Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[0] : dataset.backgroundColor) : dataset.borderColor;
                legendHtml += `
                <li style="display:inline-block;margin:0 10px;cursor:pointer;" data-index="${datasetIndex}">
                    <span style="display:inline-block;width:14px;height:14px;background:${color};margin-right:6px;border-radius:2px;vertical-align:middle;"></span>
                    <span style="vertical-align:middle;">${dataset.label}</span>
                </li>`
            })
            legendHtml += '</ul></div>';
            return legendHtml;
        }
    }
})

用这个配置需要注意两点：

• 初始化Chart实例之后，需要手动调用chartInstance.generateLegend()拿到生成的图例HTML，插入到canvas节点的后面
• 如果需要保留原生图例点击切换数据集显隐的交互，给生成的li元素绑定点击事件即可，逻辑很简单：

// 图例点击交互逻辑
document.querySelectorAll('.chartjs-legend li').forEach(item => {
    item.addEventListener('click', function() {
        const index = Number(this.dataset.index);
        const meta = chartInstance.getDatasetMeta(index);
        meta.hidden = !meta.hidden;
        chartInstance.update();
        this.style.opacity = meta.hidden ? '0.4' : '1';
    })
})

注意：不要在2.7.1版本的配置里硬写align: 'center'，这个版本的源码里根本没有解析这个参数的逻辑，写了不会生效，部分场景下还可能抛出配置校验警告。

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