无法在 HTML/PHP 中调整图表 Y 轴的范围

Question

这里是新帐户，所以基本上我有这样的代码

<div class="row">

     <div class="col-lg-6 col-xs-12 col-sm 12 ">
      <div class="box box-solid box-success">
<?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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
        <style type="text/css">
            
        </style>
        <script src="/libs/chart.bundle.js"></script>
        <style type="text/css">
            
        </style>
    
          
        <div class="chart-container">
            <canvas  class="my-4 chartjs-render-monitor" id="myChart" width="443" height="229" style="display: block; width: 443px; height: 229px;"></canvas>
            <center><h2>Barang dalam STOK</h2></center>
        </div>
        <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: {


                    }
                }
            });
        </script>
    
    </div>
</div>

结果是这样的enter image description here

由于Y轴的范围在3.0、3.1 - 5.0之间。它使其中一个数据看起来像零频率，因为 y 轴上的最低值是 3.0 而不是 0，如何更改 Y 轴上的范围，使其变为 0 - 10，没有任何逗号。谢谢

Answer 1

您可以将 min 和 max 属性与 stepSize:

一起使用

const options = {
  type: 'bar',
  data: {
    labels: ["Smartphone", "Trahsphone"],
    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>

无法在 HTML/PHP 中调整图表 Y 轴的范围

cant resize range of Y axis of chart in HTML/PHP

html

php

chart.js