初めに
データビジュアライゼーションの観点からは、嫌われているドーナツグラフ。
ドーナツにするのはやめて、棒グラフにしなさい。ドーナツだと他の項目と比べるのが難しくなるでしょう。棒グラフだと簡単に他の項目と比較できるじゃないか。という理由から嫌われています。
とは言え、なんとなくしゃれたように見えるので作りたいです。
コード
javascriptのライブラリであるchartjsを使います。htmlファイルにscriptタグをつけてjavascriptを書き込んでください。
<!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 {
margin: auto;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="canvasdiv">
<canvas id="myChart" width="100" height="100" style="align-content: center"></canvas>
</div>
<script>
Chart.defaults.font.size = 20;
Chart.defaults.animation.duration = 2500
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["イヌ", "ネコ", "フェレット", "ハムスター", "ウサギ", "トリ"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["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)'],
data: [5000, 5267, 734, 784, 433, 100]
}
]
},
options: {
plugins: {
title: {
display: true,
text: '2020年度 診療動物の割合'
},
legend: {
labels: {
font: {
size: 16
}
},
position: "right"
},
}
}
});
</script>
</body>
</html>