chart.js로 움직이는 그래프 만들기
여기서는 $f(x)=ax^2+bx+c$라는 함수를 플롯하기로 한다. 파라미터로서 $a$,$b$,$c$의 3개가 있지만, 이것들을 슬라이더로 빙빙 움직입니다.
데모는 여기
chart.js란?
여기에서는 그래프의 렌더링에 chart.js 를 사용한다. chart.js는 그래프를 브라우저에서 표시하는 JS 라이브러리 중 하나.
그래프를 만들기 위한 라이브러리라고 하면 d3.js가 유명하지만, 보다 쉽게 그래프를 쓰는 데 특화된 라이브러리. 플롯을 만들면 정말 쉽게 쓸 수 있습니다.
chart.js 입문 의 기사가 참고가 된다.
당신은 또한 공식 페이지에 샘플 모음를 보거든, 대체로 무슨 도표를 만들 수 있는지 알 것이다.
만드는 방법
우선은 html에 슬라이더를 넣는다.
<div class="slidecontainer" id="sliders">
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_a">a : <span id="val_a">0</span><br/>
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_b">b : <span id="val_b">0</span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_c">c : <span id="val_c">0</span><br />
</div>
이렇게 하여 [-1,1]의 범위에서 움직일 수 있도록 했다.
그런 다음 chart.js로 그릴 영역의 canvas 태그를 만듭니다. div 태그는 chart의 사이즈를 지정하기 위한 것.
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
chart.js 라이브러리를 CDN을 통해 검색
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
이상으로 HTML측의 준비는 완료.
다음으로 JS에서 플롯 할 점의 x 및 y 좌표를 계산합니다.
const xs = [];
for(let i=-20; i<21; i++) { xs.push(i*0.1); } // xs = [-2.0, -1.9, -1.8, .... 2.0] x:-2~2の範囲でプロットする
function calc_ys(xs,a,b,c) { // yの座標を計算するための関数
return xs.map(x => a*x*x+b*x+c);
}
계속해서 Chart 객체를 작성해 그래프를 렌더링 한다.
const ctx = document.getElementById("myChart").getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xs, // x座標の配列
datasets: [{
label: 'ax^2 + bx + c',
data: calc_ys(xs,0,0,0) // y座標の配列(初期化するときには、a=b=c=0と仮にしている)
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min:-4, max:4 // yについて[-4,4]の範囲で描画するように固定。これがないと、データの値に応じて表示領域が変わってしまう。
}
}]
}
}
});
이제 그래프가 그리는 곳까지 할 수 있다. 그 후, 슬라이더의 값에 따라 변경되는 부분을 구현한다.
y 좌표는 myChart.data.datasets[0].data
에 격납되어 있으므로, 이 배열을 새로운 것으로 옮겨놓는다. 그런 다음 myChart.update()
를 호출하면 그래프가 업데이트됩니다.
var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
let a = document.getElementById("slider_a").value; // sliderの値を取得
let b = document.getElementById("slider_b").value;
let c = document.getElementById("slider_c").value;
document.getElementById("val_a").textContent = a; // 取得した値を"#val_a"のテキストに表示
document.getElementById("val_b").textContent = b;
document.getElementById("val_c").textContent = c;
myChart.data.datasets[0].data = calc_ys(xs,Number(a),Number(b),Number(c)); // プロットのy座標のデータを新しいもので置き換える。
myChart.update(); // 新しいデータを反映させる
}, false);
이상으로 움직이는 플롯을 구현할 수 있습니다.
전체 소스 코드는 여기을 참조하십시오.
Reference
이 문제에 관하여(chart.js로 움직이는 그래프 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yohm/items/586690bf36efa0838e37
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선은 html에 슬라이더를 넣는다.
<div class="slidecontainer" id="sliders">
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_a">a : <span id="val_a">0</span><br/>
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_b">b : <span id="val_b">0</span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_c">c : <span id="val_c">0</span><br />
</div>
이렇게 하여 [-1,1]의 범위에서 움직일 수 있도록 했다.
그런 다음 chart.js로 그릴 영역의 canvas 태그를 만듭니다. div 태그는 chart의 사이즈를 지정하기 위한 것.
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
chart.js 라이브러리를 CDN을 통해 검색
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
이상으로 HTML측의 준비는 완료.
다음으로 JS에서 플롯 할 점의 x 및 y 좌표를 계산합니다.
const xs = [];
for(let i=-20; i<21; i++) { xs.push(i*0.1); } // xs = [-2.0, -1.9, -1.8, .... 2.0] x:-2~2の範囲でプロットする
function calc_ys(xs,a,b,c) { // yの座標を計算するための関数
return xs.map(x => a*x*x+b*x+c);
}
계속해서 Chart 객체를 작성해 그래프를 렌더링 한다.
const ctx = document.getElementById("myChart").getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xs, // x座標の配列
datasets: [{
label: 'ax^2 + bx + c',
data: calc_ys(xs,0,0,0) // y座標の配列(初期化するときには、a=b=c=0と仮にしている)
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min:-4, max:4 // yについて[-4,4]の範囲で描画するように固定。これがないと、データの値に応じて表示領域が変わってしまう。
}
}]
}
}
});
이제 그래프가 그리는 곳까지 할 수 있다. 그 후, 슬라이더의 값에 따라 변경되는 부분을 구현한다.
y 좌표는
myChart.data.datasets[0].data
에 격납되어 있으므로, 이 배열을 새로운 것으로 옮겨놓는다. 그런 다음 myChart.update()
를 호출하면 그래프가 업데이트됩니다.var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
let a = document.getElementById("slider_a").value; // sliderの値を取得
let b = document.getElementById("slider_b").value;
let c = document.getElementById("slider_c").value;
document.getElementById("val_a").textContent = a; // 取得した値を"#val_a"のテキストに表示
document.getElementById("val_b").textContent = b;
document.getElementById("val_c").textContent = c;
myChart.data.datasets[0].data = calc_ys(xs,Number(a),Number(b),Number(c)); // プロットのy座標のデータを新しいもので置き換える。
myChart.update(); // 新しいデータを反映させる
}, false);
이상으로 움직이는 플롯을 구현할 수 있습니다.
전체 소스 코드는 여기을 참조하십시오.
Reference
이 문제에 관하여(chart.js로 움직이는 그래프 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yohm/items/586690bf36efa0838e37텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)