Chart.jsトップライングラフ上でのクリッピング

Question

Chart.jsのグラフで過去2時間の外気温を表示していますが、その範囲が本当に大きい場合は、チャートがカットされて上にクリップされます私はそれを修正しようと多くの方法を試したが、それは動作しません。最大値に応じて拡大縮小に役立つオプションを追加できますか？どんな助けもありがとう。ありがとう。

画像：http://imgur.com/a/bFGWk

の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

これを解決するには、y軸の最大値を設定する必要があるので、同じように、あなたのtempdata配列に基づいて、ダニ：

ᴇxᴀᴍᴘʟᴇ

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

ᴡᴏʀᴋɪɴɢ

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>