JS | Chart.jsを使って色んな形のチャートを簡単に作成する方法

// Version 4.2.1 Chart.js
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js
"></script>

<!-- 表示するcanvas領域 -->
<div>
  <canvas id="myChart"></canvas>
</div>

<!-- Chart.js -->
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js
"></script>

<!-- chart設定 -->
<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<!-- 表示するcanvas領域 -->
<canvas id="myChart" width="400" height="400"></canvas>
<!-- chart設定 -->
<script>
const ctx = document.getElementById('myChart').getContext('2d');

// Setupタブのコード
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

const data = {
	labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
	datasets: [
		{
			label: 'Dataset 1',
			/**
			 * 始めに利用したサンプルチャートのデータを拝借
			 */
			data: [12, 19, 3, 5, 2, 3],
			// data: Utils.numbers(NUMBER_CFG),
			/**
			 * 見やすくするための色指定
			 */
			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)'
			],
			// backgroundColor: Object.values(Utils.CHART_COLORS),
		}
	]
};

// Configタブのコード
const config = {
	type: 'pie',
	data: data,
	options: {
		responsive: true,
		plugins: {
			legend: {
				position: 'top',
			},
			title: {
				display: true,
				text: 'Chart.js Pie Chart'
			}
		}
	},
};

// Actionsタブのコード 今回使いません

const myChart = new Chart(ctx, config);
</script>

<script>
const ctx = document.getElementById('myChart').getContext('2d');

const data = {
	labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
	datasets: [
		{
			label: 'Dataset 1',
			data: [12, 19, 3, 5, 2, 3],
			// data: Utils.numbers(NUMBER_CFG),
			borderColor: 'rgba(255, 99, 132, 0.2)',
			// borderColor: Utils.CHART_COLORS.red,
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			// backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
		},
		{
			label: 'Dataset 2',
			data: [5, 11, 12, 16, 3, 9],
			borderColor: 'rgba(54, 162, 235, 0.2)',
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
		}
	]
};

const config = {
	type: 'line',
	data: data,
	options: {
		responsive: true,
		plugins: {
			legend: {
				position: 'top',
			},
			title: {
				display: true,
				text: 'Chart.js Line Chart'
			}
		}
	},
};

const myChart = new Chart(ctx, config);
</script>