chartjs 옵션 변경 후 그래프 업데이트
동기
chartjs 그래프의 옵션을 변경한 다음 그래프 업데이트할 코드를 기록해 둡니다.
인터넷에서 찾았지만 좀처럼 찾을 수 없어서 메모합니다.
복잡하지 않고 간단한 코드로 기록합니다.
그래프의 세로 스케일의 최대값을 변경한 다음 그래프를 변경하는 예
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>縦スケールオプション変更</title>
<!-- ライブラリの指定 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
window.onload = function(){
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'line',
// データセットのデータ
data: {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
datasets: [{
label: "初めてのデータセット",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// ここに設定オプションを書きます
options: {
scales: {
yAxes: [ // Ｙ軸
{
ticks: { // 目盛り
min: 0, // 最小値
max: 45, // 最大値
stepSize: 5 // 間隔
}
}
]
}
}
});
document.getElementById("square-button").onclick = function () {
// 縦スケール最大値を変更する
chart.options.scales.yAxes[0].ticks.max = 100
// グラフを更新メソッド
chart.update();
}
}
</script>
</head>
<body>
<p>縦スケール範囲を変更</p>
<canvas id="myChart"></canvas>
<button id="square-button">縦スケール最高値を100にする</button>
</body>
</html>
결과
변경 전 최대값: 45
변경 후 최대 값 : 100
Reference
이 문제에 관하여(chartjs 옵션 변경 후 그래프 업데이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Qiu/items/4fbdd8d33f192788e5b1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
