Chart.js 折线图顶部剪裁

Question

我在 Chart.js 中有一张图表显示过去 2 小时的室外温度，但只要范围非常大，图表就会被截断并剪到顶部，我试过了许多方法试图修复它，但它就是行不通。我可以添加一个选项来帮助它相应地缩放到最大值吗？任何帮助，将不胜感激。谢谢

JavaScript（片段）：

var chart = new Chart(ctx, {
    type: 'line',

    data: {
        labels: labels,
        datasets: [{
            label: 'Outdoor Temperature',
            backgroundColor: graphBgColor,
            borderColor: graphBorderColor,
            data: tempdata,
            }]
    },


    options: {
        scaleLabel: " <%= Number(value / 1000) + ' MB'%>"
    }
});

Answer 1

要解决此问题，您需要根据 tempdata 数组设置 y 轴刻度的最大值，如下所示：

options: {
   scales: {
      yAxes: [{
         ticks: {
            max: Math.max.apply(null, tempdata) + 1, //max value + 1
         }
      }]
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var labels = ['Jan', 'Feb', 'Mar', 'Apr'];
var tempdata = [2, 4, 1, 3];
var graphBgColor = 'rgba(0, 119, 204, 0.1)';
var graphBorderColor = 'rgba(0, 119, 204, 0.5)';

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Outdoor Temperature',
         backgroundColor: graphBgColor,
         borderColor: graphBorderColor,
         data: tempdata,
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               max: Math.max.apply(null, tempdata) + 1, //max value + 1
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Chart.js 折线图顶部剪裁

Chart.js Clipping on Top of Line Graph

javascript

charts

graph

chart.js

chart.js2