この記事は最新更新日から、5年以上経過しています。
概要
棒グラフつくる機会が意味わからんぐらい増えたので、棒グラフを簡単に作れるように、のちの自分のためによく使う設定をまとめました。
内容
こういうグラフを作ります
下記をまるごと.htmlファイルに貼り付けてダブルクリックすれば見られるはず。
書き方としてはひどいですが、ブラウザで見れはします…。
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="width:80%">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
//棒グラフ
type: 'bar',
// 実データ
data: {
labels: ['今日','明日','明後日','明々後日'],
datasets: [{
label: '目標値',
backgroundColor: '#FFFF00',
data: [12000,118000,80000,60000]
},{
label: '今年',
backgroundColor: '#18FFFF',
data: [130000,118000,10200,50000]
},{
label: '去年',
backgroundColor: '#FF4081',
data: [90000,1200000,110000,90000]
}
]
},
// Configuration options go here
options: {
title: {
display: true,
text: '毎日の何かの価格'
},
scales: {
xAxes: [
{
ticks: {}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 150000,
stepSize: 50000,
callback: function(label) {
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
]
},
tooltips: {
callbacks: {
label: function(tooltipItem){
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
}
});
</script>
おわり
