将轴刻度更改为整数而不是小数 - chart.js

Question

我正在使用 chart.js，但我似乎无法更改 Y 轴的比例以显示整数，在这个例子中我想在scale (1,2,3,4,5) instad of the decimal (0 -0,5 - 1,0 - 1,5 - 2,0 - etc)

我正在使用此处的垂直条形图：https://www.chartjs.org/docs/latest/samples/bar/vertical.html

我当前的设置是这样的：

var setVirtualBarChart = function (element, viewModel) {
    var chArea = element.getContext("2d");
    var chartConfig = {
        type: 'bar',
        data: {
            labels: ['Categories'],
            datasets: [
                {
                    minBarLength: 2,
                    label: '0-7 days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.ZeroToSevenDaysUser(),
                    backgroundColor: window.chartColors.BrightVisibleGreen
                },
                {
                    minBarLength: 2,
                    label: '8-30 days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.SevenToThirtyDaysUser(),
                    backgroundColor: window.chartColors.Orange
                },
                {
                    minBarLength: 2,
                    label: '30+ test days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.ThirtyPlusDaysUser(),
                    backgroundColor: window.chartColors.BrightRed
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [
                    {
                        stacked: false,
                        display: true,
                        scaleLabel: {
                            display: true,
                            //labelString: 'Categories',
                            gridLines: {
                                offsetGridLines: true
                            }
                        }
                    }
                ],
                yAxes: [
                    {
                        stacked: false,
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Number of invoices'
                        },
                        ticks: {
                            precision: 0,
                            min: 0
                        }
                    }
                ]
            }
        }
    };

    VirtualBarChart = new Chart(chArea, chartConfig);
};

Answer 1

您在使用 v3 时使用了 v2 语法，在 v3 中所有比例都是对象，不再是数组。对于所有更改，请阅读 migration guide

例子：

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      label: '# of Votes',
      data: [1, 2.5, 1.5],
      backgroundColor: ["Red", "Blue", "Yellow"]
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          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/3.7.0/chart.js"></script>
</body>

将轴刻度更改为整数而不是小数 - chart.js

change axis scale to be round numbers instead of decimal - chart.js

javascript

chart.js