You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将Chart.js柱状图的Y轴最大值从20调整为30?

可以实现将Y轴最大值调整为30的需求

只需要在Chart的配置项options中添加scales配置,指定Y轴的最大值为30即可,具体修改后的完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <style>
    </style>
    <title>Chart</title>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script>
        const ctx = document.getElementById('myChart');     
        const data = [10, 12, 14, 20, 16, 11];
           
        Chart.register(ChartDataLabels);
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
                datasets: [{
                    label: `testtesttest`,
                    data: data,
                    borderWidth: 0,
                    backgroundColor: 'blue',
                    borderColor: 'blue'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        max: 30 // 设置Y轴最大值为30
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'testtesttest',
                        color: 'black',
                        font: {
                            weight: 'bold',
                            size: 13
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'end',
                        color: 'black',
                        font: {
                            weight: '',
                        },
                        formatter: function (value, context) {
                            return value;
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange,提问作者HelloWorld1

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 02:50:10