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

回答編集履歴

3

修正

2021/10/25 13:14

投稿

退会済みユーザー
answer CHANGED
@@ -37,15 +37,6 @@
37
37
   
38
38
  これを、ラベルに対応したデータとしてChartのdatasetに適用すればよいのではないでしょうか。
39
39
  ```js
40
-
41
- const colors = {
42
- typeA: "#121554",
43
- typeB: "#1d3681",
44
- typeC: "#2e70a7",
45
- typeD: "#4eadc7",
46
- undefined: "#a7d8bf",
47
- };
48
-
49
40
  const types = [
50
41
  { name: "typeA", color: "#121554" },
51
42
  { name: "typeB", color: "#1d3681" },

2

修正

2021/10/25 13:14

投稿

退会済みユーザー
answer CHANGED
@@ -46,15 +46,23 @@
46
46
  undefined: "#a7d8bf",
47
47
  };
48
48
 
49
+ const types = [
50
+ { name: "typeA", color: "#121554" },
51
+ { name: "typeB", color: "#1d3681" },
52
+ { name: "typeC", color: "#2e70a7" },
53
+ { name: "typeD", color: "#4eadc7" },
54
+ { name: "undefined", color: "#a7d8bf" },
55
+ ];
56
+
49
57
  const labels = ["A", "B"];
50
58
 
51
- const datasets = Object.keys(groupBy).map((e) => {
59
+ const datasets = types.map((e) => {
52
60
  return {
53
- label: e,
61
+ label: e.name,
54
62
  borderWidth: 1,
55
- backgroundColor: colors[e] || colors.undefined,
63
+ backgroundColor: e.color,
56
- borderColor: colors[e] || colors.undefined,
64
+ borderColor: e.color,
57
- data: labels.map((i) => groupBy[e][i] || 0),
65
+ data: labels.map((i) => groupBy[e.name] && groupBy[e.name][i] || 0),
58
66
  };
59
67
  });
60
68
 

1

修正

2021/10/25 13:14

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,4 @@
1
- 元の配列 group の要素最初と最後を入れ替えると
1
+ たとえば質問文記載されている配列 group の最後の要素最初に持っきてスクリプトを実行すると
2
2
  groupBy は
3
3
  ```text
4
4
  (4) [Array(2), Array(2), Array(2), Array(2)]
@@ -26,9 +26,9 @@
26
26
  これにより、groupBy は以下のようなデータになります。
27
27
  ```js
28
28
  {
29
- typeA: {A: 60, B: 66}
29
+ typeA: {A: 60, B: 66},
30
- typeB: {A: 120, B: 257}
30
+ typeB: {A: 120, B: 257},
31
- typeC: {B: 0, A: 83}
31
+ typeC: {B: 0, A: 83},
32
32
  typeD: {B: 120, A: 0}
33
33
  }
34
34
  ```
@@ -38,7 +38,7 @@
38
38
  これを、ラベルに対応したデータとしてChartのdatasetに適用すればよいのではないでしょうか。
39
39
  ```js
40
40
 
41
- cconst colors = {
41
+ const colors = {
42
42
  typeA: "#121554",
43
43
  typeB: "#1d3681",
44
44
  typeC: "#2e70a7",