如何将Chart.js柱状图的Y轴最大值从20调整为30?
可以实现将Y轴最大值调整为30的需求
只需要在Chart的配置项options中添加scales配置,指定Y轴的最大值为30即可,具体修改后的完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> </style> <title>Chart</title> </head> <body> <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <script> const ctx = document.getElementById('myChart'); const data = [10, 12, 14, 20, 16, 11]; Chart.register(ChartDataLabels); new Chart(ctx, { type: 'bar', data: { labels: ['2020', '2021', '2022', '2023', '2024', '2025'], datasets: [{ label: `testtesttest`, data: data, borderWidth: 0, backgroundColor: 'blue', borderColor: 'blue' }] }, options: { responsive: true, scales: { y: { max: 30 // 设置Y轴最大值为30 } }, plugins: { title: { display: true, text: 'testtesttest', color: 'black', font: { weight: 'bold', size: 13 } }, datalabels: { anchor: 'end', align: 'end', color: 'black', font: { weight: '', }, formatter: function (value, context) { return value; } } } } }); </script> </body> </html>
内容的提问来源于stack exchange,提问作者HelloWorld1
相关产品推荐
相关产品推荐

