使用 Chart.js 控制柱状图 Y 轴范围-php教程-PHP中文网

使用 Chart.js 控制柱状图 Y 轴范围

心靈之曲

发布： 2025-07-07 19:06:02

原创

164人浏览过

使用 chart.js 控制柱状图 y 轴范围

本文档旨在指导开发者如何使用 Chart.js 库来精确控制柱状图的 Y 轴显示范围，避免因数据范围过小而导致视觉上的误导。通过设置 min、max 和 stepSize 属性，可以自定义 Y 轴的最小值、最大值和刻度间隔，从而优化图表的可读性和准确性。

Chart.js Y 轴范围控制详解

Chart.js 是一个流行的 JavaScript 图表库，可以轻松创建各种图表，包括柱状图、折线图、饼图等。在创建柱状图时，有时我们需要自定义 Y 轴的范围，以更好地展示数据。默认情况下，Chart.js 会自动根据数据范围调整 Y 轴的范围，但有时这种自动调整可能不符合我们的需求，例如，当数据范围较小时，Y 轴的起始值可能不是 0，导致视觉上的误导。

要解决这个问题，我们可以使用 Chart.js 提供的 scales.yAxes.ticks 选项来手动设置 Y 轴的范围。

核心配置选项

scales.yAxes.ticks 选项允许我们配置 Y 轴的刻度。其中，有三个关键属性可以控制 Y 轴的范围：

min: 设置 Y 轴的最小值。
max: 设置 Y 轴的最大值。
stepSize: 设置 Y 轴的刻度间隔。

通过设置这三个属性，我们可以精确地控制 Y 轴的显示范围和刻度。

示例代码

以下是一个示例代码，展示如何使用 min、max 和 stepSize 属性来控制柱状图的 Y 轴范围：

const options = {
  type: 'bar',
  data: {
    labels: ["Smartphone", "Trashphone"],
    datasets: [{
      label: '# of Votes',
      data: [4, 4],
      backgroundColor: [
        'rgba(255, 99, 132, 0.9)',
        'rgba(54, 162, 235, 0.7)',
      ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 10,
          stepSize: 1
        }
      }]
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

登录后复制

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>

登录后复制

在这个例子中，我们将 Y 轴的最小值设置为 0，最大值设置为 10，刻度间隔设置为 1。这样，即使数据的值都在 3 到 5 之间，Y 轴也会从 0 开始显示，避免了视觉上的误导。

PHP 集成注意事项

如果在 PHP 中动态生成 Chart.js 图表，需要注意将 JavaScript 代码嵌入到 HTML 中时，确保变量正确传递。在问题描述的代码中，可以将 options 对象作为 JSON 字符串传递到 JavaScript 中。

<?php
$barang       = mysqli_query($conn, "SELECT k.nama FROM kategori k  LEFT JOIN barang b ON k.kode = b.kategori  group by k.kode");
$stok         = mysqli_query($conn, "SELECT COUNT(*) as kategori FROM kategori k LEFT JOIN barang b   ON k.kode = b.kategori  group by k.nama");
?>

<script>
  var ctx = document.getElementById("myChart");
  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.9)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.8)',
          'rgba(75, 192, 192, 0.3)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(255, 159, 64, 0.3)',
          'rgba(255, 99, 132, 0.8)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.8)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.4)',
          'rgba(255, 159, 64, 0.7)'
        ],
        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)',
          'rgba(255, 159, 64, 1)',
          '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)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            max: 10,
            stepSize: 1
          }
        }]
      }
    }
  });
</script>

登录后复制