質問するログイン新規登録

回答編集履歴

5

2021/05/19 23:28

投稿

退会済みユーザー
answer CHANGED
@@ -23,8 +23,7 @@
23
23
  //X軸
24
24
  xAxes: [{
25
25
  stacked: true, //積み上げ棒グラフにする設定
26
- categoryPercentage: 0.4, //棒グラフの太さ //
26
+ categoryPercentage: 0.4, //棒グラフの太さ 修正
27
- 修正
28
27
  //軸ラベル表示
29
28
  scaleLabel: {
30
29
  display: true,

4

ategoryPercentage => categoryPercentage に修正

2021/05/19 23:28

投稿

退会済みユーザー
answer CHANGED
@@ -23,7 +23,8 @@
23
23
  //X軸
24
24
  xAxes: [{
25
25
  stacked: true, //積み上げ棒グラフにする設定
26
- ategoryPercentage: 0.4, //棒グラフの太さ
26
+ categoryPercentage: 0.4, //棒グラフの太さ //
27
+ 修正
27
28
  //軸ラベル表示
28
29
  scaleLabel: {
29
30
  display: true,

3

コメント位置修正

2021/05/19 23:27

投稿

退会済みユーザー
answer CHANGED
@@ -39,8 +39,8 @@
39
39
  display: true,
40
40
  labelString: '時間' // 修正
41
41
  },
42
+ // 下記追加
42
43
  ticks: {
43
- // 下記追加
44
44
  callback: function (value, index, values) {
45
45
  var h = Math.round(value / 60)
46
46
  var m = value % 60

2

縦軸を00:00表示にする方法を追加

2021/05/19 23:14

投稿

退会済みユーザー
answer CHANGED
@@ -12,4 +12,46 @@
12
12
  ```
13
13
 
14
14
  適用例:
15
- ![イメージ説明](fc4e1b0cf43a88ffdac463958383a2f2.png)
15
+ ![イメージ説明](fc4e1b0cf43a88ffdac463958383a2f2.png)
16
+
17
+
18
+
19
+ -------
20
+ 縦軸を「00:00」表記にするには下記のようにします。
21
+ ```
22
+ scales: {
23
+ //X軸
24
+ xAxes: [{
25
+ stacked: true, //積み上げ棒グラフにする設定
26
+ ategoryPercentage: 0.4, //棒グラフの太さ
27
+ //軸ラベル表示
28
+ scaleLabel: {
29
+ display: true,
30
+ labelString: '日付' // 修正
31
+ }
32
+
33
+ }],
34
+ //Y軸
35
+ yAxes: [{
36
+ stacked: true, //積み上げ棒グラフにする設定
37
+ //軸ラベル表示
38
+ scaleLabel: {
39
+ display: true,
40
+ labelString: '時間' // 修正
41
+ },
42
+ ticks: {
43
+ // 下記追加
44
+ callback: function (value, index, values) {
45
+ var h = Math.round(value / 60)
46
+ var m = value % 60
47
+ var hh = h < 10 ? "0" + h : h
48
+ var mm = m < 10 ? "0" + m : m
49
+ return `${hh}:${mm}`;
50
+ },
51
+ max: 720,
52
+ min: 0,
53
+ stepSize: 60
54
+ }
55
+ }]
56
+ }
57
+ ```

1

2021/05/19 23:12

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,4 @@
1
- (質問のコードで積み上げ棒グラフが表示できているので、Chart.jsのバージョンが2系であるとの前提です 2.9.3で確認しています。)
1
+ (質問のコードで積み上げ棒グラフが表示できているので、Chart.jsのバージョンが2系であるとの前提です 。Chart.js ver 2.9.3で確認しています。)
2
2
 
3
3
  各項目のタイトルは、`data.datasets[tooltipItem.datasetIndex].label`
4
4
  値は、`tooltipItem.yLabel`