Chart.Js样式配置问题：如何为柱状图添加指定样式效果

解决代码 #

<script>
var ctx = document.getElementById('myChart').getContext('2d');
// 注册datalabels插件，使用前请先在页面引入对应版本的chartjs-plugin-datalabels资源
Chart.register(ChartDataLabels);
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
        datasets: [{
            label: 'ICEV CAR (MTCO2e/Year)',
            labels: [
                "{{data['battery_icev_car']}}",
                "{{data['other_mfg_icev_car']}}", 
                "{{data['delivery_icev_car']}}", 
                "{{data['tailpipe_icev_car']}}",
                "{{data['fuel_cycle_icev_car']}}", 
                "{{data['disposal_icev_car']}}", 
                "{{data['total_icev_car']}}"
            ],
            data: [  /* errors are normal, fixes when server run */
                [0, {{data['y1_icev']}}],
                [{{data['y1_icev']}}, {{data['y2_icev']}}],
                [{{data['y2_icev']}}, {{data['y3_icev']}}],
                [{{data['y3_icev']}}, {{data['y4_icev']}}],
                [{{data['y4_icev']}}, {{data['y5_icev']}}],
                [{{data['y5_icev']}}, {{data['y6_icev']}}],
                [0, {{data['y6_icev']}}]
            ],
            backgroundColor: [
                'rgba(0,0,0,0.9)'
            ],
            borderColor: [
                'rgba(0,0,0,1)'
            ],
            borderWidth: 1,
            borderSkipped: false
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                labels: {
                    font: {
                        size: 20
                    }
                }
            },
            // 柱子顶部标签配置
            datalabels: {
                anchor: 'end',
                align: 'top',
                formatter: function(value, context) {
                    return context.dataset.labels[context.dataIndex];
                },
                font: {
                    size: 14
                }
            }
        },
        scales: {
            // x轴刻度字体配置
            x: {
                ticks: {
                    font: {
                        size: 16
                    }
                }
            },
            // y轴配置
            y: {
                beginAtZero: true,
                min: 0,
                max: 8,
                stepSize: 1,
                ticks: {
                    font: {
                        size: 16
                    }
                }
            }
        }
    },
    plugins: [ChartDataLabels]
});
</script>

配置说明 #

• 柱子顶部显示标签：通过datalabels插件实现，anchor和align参数控制标签定位在柱子顶部，formatter函数指定显示你提前定义在dataset下的标签文本，可自行调整字体大小适配页面。
• 坐标轴刻度字体大小修改：Chart.js v3+版本不再使用旧版yAxes数组结构，直接在options.scales.x和options.scales.y下的ticks.font.size配置对应字体大小即可，数值可按需调整。
• y轴刻度固定0-8：在y轴配置项中新增min: 0和max: 8即可锁定轴范围，stepSize参数可控制刻度间隔，不需要可以删除。

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