Chart.js로 회귀 직선 그리기
소개
R과 Python + matplotlib에서는 쉽게 그릴 수있는 회귀 직선을 JavaScript의 그래프 라이브러리 "Chart.js"로 그립니다.
다음은 산점도를 그리는 데이터에서 회귀식을 구하여 회귀 직선을 그리는 샘플입니다.
샘플
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cahrt.jsで回帰直線を描くサンプル</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
</head>
<body>
<!-- グラフ描画エリア設定 -->
<div style="width:100%">
<canvas id="canvas"></canvas>
</div>
<script>
// 散布図データ
var sample = [
{x:1, y:4},{x:2, y:3},{x:3, y:4},{x:4, y:5},{x:5, y:6},{x:6, y:5},{x:7, y:7},{x:8, y:6},{x:9, y:8},{x:10, y:7}
];
// 回帰直線の傾きと切片を求める
var sx = 0;
var sy = 0;
var sxy = 0;
var sxsq = 0;
var xmean;
var ymean;
var alpha;
var beta;
var n;
sample.forEach(function(val) {
sx += val.x;
sy += val.y;
sxy += val.x * val.y;
sxsq += Math.pow(val.x,2);
});
n = sample.length;
xmean = sx/n;
ymean = sy/n;
beta = ((n*sxy) - (sx*sy))/((n*sxsq)-(Math.pow(sx,2))); // 傾き
alpha = ymean - (beta * xmean); // 切片
// 回帰式より、回帰直線描画用データを作成
var regressionLinePlot = [];
sample.forEach(function(val) {
regressionLinePlot.push({'x': val.x, 'y': alpha + beta*val.x});
});
// 散布図と回帰直線を描画
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myChart = new Chart(ctx, {
type: 'scatter',
data: plotData,
});
};
// 描画データ
var plotData = {
datasets: [
{ // 散布図
type: 'scatter',
label: 'scatter',
data: sample,
borderColor : 'rgba(100,120,255,1)', // プロットの線の色
backgroundColor: 'rgba(130,160,255,1)', // 凡例の背景色
pointBackgroundColor: 'rgba(100,120,255,1)', // 点の色
fill: false // 線とＸ軸で囲まれた範囲の描画
},
{ // 回帰直線
type: 'scatter',
label: 'Regression line',
data: regressionLinePlot, // 始点と終点のデータ（座標）
borderColor : 'rgba(20,100,20,1)', // 線の色
backgroundColor: 'rgba(70,100,70,1)', // 凡例の背景色
borderWidth : 2, // 線幅
pointRadius: 0.5, // 点の形状の半径（0にすると点を描画しない）
tension: 0, // 線を直線にする
showLine: true, // 線を描画
fill: false // 線とＸ軸で囲まれた範囲の描画
}
],
};
</script>
</body>
</html>
Reference
이 문제에 관하여(Chart.js로 회귀 직선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/saka212/items/f51282765b289c0f0d46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cahrt.jsで回帰直線を描くサンプル</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
</head>
<body>
<!-- グラフ描画エリア設定 -->
<div style="width:100%">
<canvas id="canvas"></canvas>
</div>
<script>
// 散布図データ
var sample = [
{x:1, y:4},{x:2, y:3},{x:3, y:4},{x:4, y:5},{x:5, y:6},{x:6, y:5},{x:7, y:7},{x:8, y:6},{x:9, y:8},{x:10, y:7}
];
// 回帰直線の傾きと切片を求める
var sx = 0;
var sy = 0;
var sxy = 0;
var sxsq = 0;
var xmean;
var ymean;
var alpha;
var beta;
var n;
sample.forEach(function(val) {
sx += val.x;
sy += val.y;
sxy += val.x * val.y;
sxsq += Math.pow(val.x,2);
});
n = sample.length;
xmean = sx/n;
ymean = sy/n;
beta = ((n*sxy) - (sx*sy))/((n*sxsq)-(Math.pow(sx,2))); // 傾き
alpha = ymean - (beta * xmean); // 切片
// 回帰式より、回帰直線描画用データを作成
var regressionLinePlot = [];
sample.forEach(function(val) {
regressionLinePlot.push({'x': val.x, 'y': alpha + beta*val.x});
});
// 散布図と回帰直線を描画
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myChart = new Chart(ctx, {
type: 'scatter',
data: plotData,
});
};
// 描画データ
var plotData = {
datasets: [
{ // 散布図
type: 'scatter',
label: 'scatter',
data: sample,
borderColor : 'rgba(100,120,255,1)', // プロットの線の色
backgroundColor: 'rgba(130,160,255,1)', // 凡例の背景色
pointBackgroundColor: 'rgba(100,120,255,1)', // 点の色
fill: false // 線とＸ軸で囲まれた範囲の描画
},
{ // 回帰直線
type: 'scatter',
label: 'Regression line',
data: regressionLinePlot, // 始点と終点のデータ（座標）
borderColor : 'rgba(20,100,20,1)', // 線の色
backgroundColor: 'rgba(70,100,70,1)', // 凡例の背景色
borderWidth : 2, // 線幅
pointRadius: 0.5, // 点の形状の半径（0にすると点を描画しない）
tension: 0, // 線を直線にする
showLine: true, // 線を描画
fill: false // 線とＸ軸で囲まれた範囲の描画
}
],
};
</script>
</body>
</html>
Reference
이 문제에 관하여(Chart.js로 회귀 직선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/saka212/items/f51282765b289c0f0d46텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
