はじめに
棒グラフは使用頻度高いです。それゆえ、ビジュアルに工夫が欲しくなります。インタラクティブは欲しいところです。そうなると、Rかpythonかjavascriptかとなると思います。javascriptは環境もいらないので一番お手軽だと思います。
ただjavascriptは、パワーポイントに使えないのが痛いところです。グラフにこだわり始めたら、パワーポイントを捨てreveal.js等のライブラリを使うしかなさそうです。
コード
以下のようにchartjsを使ってグラフを作成します。html内のscriptタグの中にjavascriptを書き込みます。barchart.htmlと拡張子を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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#canvasdiv {
height: auto;
margin: 10px 50px 50px 50px;
}
</style>
</head>
<body>
<div id="canvasdiv">
<canvas id="myChart" width="200" height="100"></canvas>
</div>
<script>
Chart.defaults.font.size = 18;
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: "",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins: {
title: {
display: true,
text: 'グループ別のコスト'
},
legend: { display: false },
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '売上',
color: 'grey',
},
},
x: {
title: {
display: true,
text: 'グループ',
color: 'grey',
},
}
},
animations: {
y: {
duration: 3000,
easing: 'linear',
loop: false
}
},
}
});
</script>
</body>
</html>