chart.jsにて単位を表示したい

前提

chart.jsを使用して折れ線グラフを作成しているのですが、単位の表示が上手くいきません。

実現したいこと

・chart.jsにてX軸に時間、Y軸に通信量という単位を中間地点に表示したいです。

該当のソースコード

HTML
1<html><head>
2    <meta charset="utf-8">
3    <title>Chartjs test</title>
4
5    <script src="http://static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
6    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
7</head>
8<body>
9<div>
10  <canvas id="myChart" width="1927" height="963" style="display: block; box-sizing: border-box; height: 963px; width: 1927px;"></canvas>
11</div>
12
13
14
15<script>
16  const labels = [
17    '00:00',
18    '01:00',
19    '02:00',
20    '03:00',
21    '04:00',
22    '05:00',
23    '06:00',
24    '07:00',
25    '08:00',
26    '09:00',
27    '10:00',
28    '11:00',
29    '12:00',
30    '13:00',
31    '14:00',
32    '15:00',
33    '16:00',
34    '17:00',
35    '18:00',
36    '19:00',
37    '20:00',
38    '21:00',
39    '22:00',
40    '23:00',
41  ];
42
43  const data = {
44    labels: labels,
45    datasets: [{
46      label: '消費通信量',
47      backgroundColor: 'rgb(255, 99, 132)',
48      borderColor: 'rgb(128, 255, 0)',
49      data: [3020, 3445, 3452, 4920, 6330, 5345, 3530, 3330,3445, 3622, 4320, 3330, 3345, 3445, 3022, 3420, 6230, 3345, 3530, 3690],
50    }]
51  };
52
53  const options = {
54  plugins: {
55          legend: {
56            position: 'right'
57          }
58      }
59  };
60  const config = {
61    type: 'line',
62    data: data,
63    options: options
64  };
65  
66  const myChart = new Chart(
67    document.getElementById('myChart'),
68    config
69  );
70</script></body></html>

行動規範の内容に同意します

回答1件

ベストアンサー

まずscalesを設定します。
それをoptionsの中に挿入します

javascript
1const scales ={
2  x: {
3    display: true,
4    title: {
5      display: true,
6      text: '時間'
7    }
8  },
9  y: {
10    display: true,
11    title: {
12      display: true,
13      text: '通信量'
14    },
15  },
16};
17  const options = {
18  plugins: {
19          legend: {
20            position: 'right'
21          }
22      },
23    scales, // これを追加
24  };

投稿2022/09/14 02:37

yambejp

総合スコア114839

hai

2022/09/14 02:57

表示することができました！ありがとうございます。ただこの通信量の部分が横に向いてしまう問題を解決する方法はございますでしょうか？度々申し訳ございません。

yambejp

2022/09/14 03:20

以前質問があがっていましたが https://teratail.com/questions/160312 chart.jsのオプションにはざっと見たところ見当たらないので（https://www.chartjs.org/docs/latest/samples/utils.html） chart.js自体の改造になるかもしれません。諦めたほうがよいかも

hai

2022/09/14 04:04

大変助かりました。ありがとうございます。

行動規範の内容に同意します