Chart.js で　Xが不等間隔の折れ線グラフを描画

作成した折れ線グラフです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/018cfae5-d233-c53e-ea17-81c5be2577e1.png)


入力データ

```json:data.json
[
{ "x": 0.0, "y": 10.2 },
{ "x": 0.9, "y": 4.7 }, 
{ "x": 1.2, "y": 5.1 }, 
{ "x": 1.5, "y": 6.1 }, 
{ "x": 2.2, "y": 4.3 }, 
{ "x": 3.5, "y": 6.2 }, 
{ "x": 4.2, "y": 4.8 }, 
{ "x": 4.7, "y": 5.8 }, 
{ "x": 15.2, "y": 3.2 }, 
{ "x": 18.2, "y": 5.2 }, 
{ "x": 22.5, "y": 7.5}
]
```

```html:index.html
<!DOCTYPE html>
<head lang="ja">
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
></script>
<script src="scatter.js"></script>
<script src="draw_line_chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
<hr />
Aug/08/2023<p />
</body>
```

```js:scatter.js
// ----------------------------------------------------------------------
/*
	scatter.js

						Aug/08/2023
*/
// ----------------------------------------------------------------------
window.onload = ()=>
{
	const file_json = "data.json"

	fetch(file_json).then((response) => {
		if(!response.ok) {
			console.log('Read error!')
			throw new Error('error')
		} 
		console.log('Read ok!')
		return response.text()
	}).then((data)  => {
		const data_aa = JSON.parse(data)
		draw_line_chart_proc ("myChart",data_aa,0,12)
		})
}

// ----------------------------------------------------------------------
```

```js:draw_line_chart.js
// -----------------------------------------------------------------------
/*
	draw_line_chart.js

						Aug/08/2023
*/
// -----------------------------------------------------------------------
function draw_line_chart_proc (id_chart,data_aa,ymin,ymax)
{
const options_aa = {
	 legend: { display: false },
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
		ticks: { min: 0, max: 24, stepSize: 3}
		}],
            yAxes: [{
                type: 'linear',
                position: 'bottom',
		ticks: { min: ymin, max: ymax}
		}]
		}
	}


var ctx = document.getElementById(id_chart)

var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
		tension: 0,
		fill: false,
		pointRadius: 0,
		borderWidth: 0,
		backgroundColor: "blue",
		borderColor: "blue",
		data: data_aa
		}]
		},
	options: options_aa
})

}

// -----------------------------------------------------------------------
function draw_character_xx (id_chart)
{
var ctx = document.getElementById(id_chart)[0].getContext('2d')

	ctx.font = "12px 'ＭＳ Ｐゴシック'";
	ctx.fillStyle = "black";
	ctx.fillText("時刻", 300, 15);
}

// -----------------------------------------------------------------------
function draw_character_yy (id_chart,label_aa,unit_aa)
{
var ctx = document.getElementById(id_chart)[0].getContext('2d')

	ctx.font = "12px 'ＭＳ Ｐゴシック'";
	ctx.fillStyle = "black";
	ctx.fillText(label_aa, 5, 15);
	ctx.fillText(unit_aa, 5, 35);

	ctx.font = "18px 'ＭＳ Ｐゴシック'";
	ctx.fillText(label_aa, 300, 25);
}

// -----------------------------------------------------------------------
```

関連したページ
[Chart.js で日本語を使う](https://qiita.com/ekzemplaro/items/e832078a208377e523e3)