在 chart.js 中設置 X 和 Y 軸的精確值

Question

[新圖表][1][圖表][2]

我有這張圖表，我想在其中將最大值設置為數據的最大值，這里應該是 42，但它會將數字四舍五入，所以它變成 45，我怎樣才能使最大值精確而不是進入腳步？

var myChart = new Chart(ctx, {
                type: 'scatter',
                data: {
                  datasets: [{
                    label: 'Tiempo-Hole',
                    borderColor: window.chartColors.red,
                    fill: false,
                    pointRadius: 0,
                    data: storage,
                    showLine: true,
                  },            
                    scales: {
                        yAxes: [{
                            display: true,
                            ticks: {
                                suggestedMin: 0,  
                                suggestedMax: yPoints[length] ,
                                beginAtZero: true   // minimum value will be 0.
                            }
                        }],
                        xAxes: [{
                            display: true,
                            ticks: {
                                suggestedMin: 0,    
                                suggestedMax: xPoints[xLength] ,
                                beginAtZero: true   
                            }
                        }]
                    }
                }```


  [1]: https://i.stack.imgur.com/8Altn.png
  [2]: https://i.stack.imgur.com/4k8xe.png

Answer 1

我認為您可以使用min和max選項，而不是suggestedMin的Min 和suggestedMax ，這對於擴展軸的范圍但保持自動擬合行為很有用。

 const ctx = document.getElementById("myChart"); const data = [{x:0, y:10}, {x:1, y:20}, {x:2, y:30}, {x:3, y:53}, {x:4, y:40}, {x:5, y:21}, {x:6, y:10}]; const myChart = new Chart(ctx, { type: 'scatter', data: { datasets: [{ label: 'Tiempo-Hole', borderColor: 'red', fill: false, pointRadius: 0, data, showLine: true, clip: 10 }], }, options: { scales: { yAxes: [{ display: true, ticks: { min: 0, max: data.reduce(function (max, item) { return ( max > item.y? max: item.y); }), stepSize: data.reduce(function (max, item) { return ( max > item.y? max: item.y); }) / 10, callback: (value) => Math.trunc(value), beginAtZero: true } }], xAxes: [{ display: true, ticks: { min: 0, max: data.reduce(function (max, item) { return ( max > item.x? max: item.x); }), beginAtZero: true } }] } } });

 .myChartDiv { max-width: 600px; max-height: 400px; }

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"></canvas> </div>