使用 Chart.js 调整 Y 轴范围：从 0 开始显示条形图数据-php教程-PHP中文网

使用 Chart.js 调整 Y 轴范围：从 0 开始显示条形图数据

聖光之護

发布： 2025-07-07 18:34:11

原创

830人浏览过

使用 chart.js 调整 y 轴范围：从 0 开始显示条形图数据

本文介绍了如何使用 Chart.js 库调整条形图的 Y 轴范围，使其从 0 开始显示数据，避免因 Y 轴起始值过高导致数据视觉上的偏差。通过设置 min、max 和 stepSize 属性，可以精确控制 Y 轴的显示范围和刻度。

Chart.js 是一个流行的 JavaScript 图表库，可以用于在网页上创建各种类型的图表，包括条形图、折线图、饼图等。在创建条形图时，有时需要调整 Y 轴的范围，使其从 0 开始显示数据，这样可以更准确地反映数据的比例关系，避免视觉上的误导。

以下是如何使用 Chart.js 调整 Y 轴范围的步骤：

引入 Chart.js 库:

首先，需要在 HTML 文件中引入 Chart.js 库。可以通过 CDN 引入，也可以下载到本地引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

登录后复制

创建 Canvas 元素:

在 HTML 文件中创建一个

<canvas id="myChart" width="400" height="200"></canvas>

登录后复制

编写 JavaScript 代码:

在 JavaScript 代码中，使用 Chart 对象创建图表，并设置 options 属性来调整 Y 轴范围。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['类别1', '类别2', '类别3', '类别4', '类别5'],
        datasets: [{
            label: '数据',
            data: [4, 7, 2, 9, 5],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,  // 设置 Y 轴最小值
                    max: 10, // 设置 Y 轴最大值
                    stepSize: 1 // 设置 Y 轴刻度间隔
                }
            }]
        }
    }
});

登录后复制

在上面的代码中，options.scales.yAxes[0].ticks 对象用于设置 Y 轴的刻度。

min: 设置 Y 轴的最小值。设置为 0 可以使 Y 轴从 0 开始显示。
max: 设置 Y 轴的最大值。根据数据的最大值进行设置。
stepSize: 设置 Y 轴的刻度间隔。根据数据的范围和精度进行设置。

完整示例代码 (结合PHP):






    Chart.js 条形图
    


    <canvas id="myChart" width="400" height="200"></canvas>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [<?php while ($b = mysqli_fetch_array($barang)) { echo '"' . $b['nama'] . '",';}?>],
                datasets: [{
                    label: 'Stok',
                    data: [<?php while ($p = mysqli_fetch_array($stok)) { echo '"' . $p['kategori'] . '",';}?>],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            max: 10, // 调整为合适的最大值
                            stepSize: 1
                        }
                    }]
                }
            }
        });
    </script>

登录后复制

注意事项: