概要
別記事で
「プロジェクトの学びを捨てることは大きな損失である」
を投稿しました。
その記事ではプロジェクトの損益について下記の３つの式を記載しています。
損益 = 価値 − 投下資本 × ( 1 + 学習コスト率 )
価値 = 投下資本 × 価値創造率 × 成功率成
成功率 = 初期成功率 ×( 1+ 学習改善率 × 回数 )
これらをChart.jsを使ってインタラクティブに計算するようにしました。
やったこと
実際に作ったページのキャプチャです。
こちらのサイトから閲覧できます。
https://dyson-yamashita.github.io/project-learn-chart/
Chart.jsはJavascriptで様々はグラフを
描くことができ、Webページに埋め込むことができるライブラリです。
const draw = function () {
let context = document.querySelector("#chart").getContext('2d')
const datasets = createDatasets()
window.chart=new Chart(context, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
datasets: datasets,
},
options: {
responsive: false,
}
})
}
...
<body>
<canvas id="chart" width="600" height="400"></canvas>
こんな感じでcanvas上に記述することができます。
今回はとりあえず動くものとして、CDNからchart.jsを取得して
見た目はTailwindを使って
classで指定しています。
ソースコードはこちらで公開しております。
https://github.com/dyson-yamashita/project-learn-chart
よければ、グラフで遊んでください。
以上、プロジェクトの学びを捨てることは大きな損失であるをChart.jsで描く でした。