質問編集履歴
2
情報追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -47,84 +47,4 @@
|
|
|
47
47
|
２月
|
|
48
48
|
合計値：６.５ これを追加したいです。
|
|
49
49
|
■要素１：５
|
|
50
|
-
■要素２：１.５
|
|
50
|
+
■要素２：１.５
|
|
51
|
-
|
|
52
|
-
詳しい方アドバイス頂けると助かります。
|
|
53
|
-
|
|
54
|
-
```html
|
|
55
|
-
<script>
|
|
56
|
-
|
|
57
|
-
function thousandsSeparator(value, index, values) {
|
|
58
|
-
value = value.toString().split(/(?=(?:...)*$)/).join(',');
|
|
59
|
-
return value;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
var ctx = document.getElementById("BarChart").getContext('2d');
|
|
63
|
-
var DiskChart = new Chart(ctx, {
|
|
64
|
-
type: 'bar',
|
|
65
|
-
data: {
|
|
66
|
-
labels:[
|
|
67
|
-
{% for item in x_label_data %}
|
|
68
|
-
'{{item}}',
|
|
69
|
-
{% endfor %}
|
|
70
|
-
],
|
|
71
|
-
datasets: [
|
|
72
|
-
{% for product_name in product_list %}
|
|
73
|
-
{
|
|
74
|
-
label: "{{product_name}}",
|
|
75
|
-
data: [
|
|
76
|
-
{% for time_label_data in x_label_data %}
|
|
77
|
-
{% for date, product, total in matrix_list_data %}
|
|
78
|
-
{% if product == product_name %}
|
|
79
|
-
{% if date == time_label_data %}
|
|
80
|
-
{{total}},
|
|
81
|
-
{% endif %}
|
|
82
|
-
{% endif %}
|
|
83
|
-
{% endfor %}
|
|
84
|
-
{% endfor %}
|
|
85
|
-
],
|
|
86
|
-
},
|
|
87
|
-
{% endfor %}
|
|
88
|
-
]
|
|
89
|
-
},
|
|
90
|
-
options: {
|
|
91
|
-
responsive: true,
|
|
92
|
-
tooltips: {
|
|
93
|
-
mode: 'nearest',
|
|
94
|
-
intersect: false,
|
|
95
|
-
mode: 'index',
|
|
96
|
-
callbacks: {
|
|
97
|
-
label: (item, data) => {
|
|
98
|
-
const { label } = data.datasets[item.datasetIndex];
|
|
99
|
-
const value = item.value.replace('NaN', '');
|
|
100
|
-
return value && `${label}: ${value}`;
|
|
101
|
-
},
|
|
102
|
-
afterTitle: (items, data) => {
|
|
103
|
-
const values = items.map(e => e.value !== 'NaN' ? +e.value : 0);
|
|
104
|
-
return `合計値: ${values[0] + values[1]}`;
|
|
105
|
-
},
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
scales: {
|
|
109
|
-
xAxes: [{
|
|
110
|
-
maxBarThickness: 70,
|
|
111
|
-
stacked: true,
|
|
112
|
-
ticks: {
|
|
113
|
-
autoSkip: true,
|
|
114
|
-
maxRotation:0,
|
|
115
|
-
minRotation:0
|
|
116
|
-
},
|
|
117
|
-
}],
|
|
118
|
-
yAxes: [{
|
|
119
|
-
stacked: true,
|
|
120
|
-
ticks:{
|
|
121
|
-
min: 0,
|
|
122
|
-
userCallback: thousandsSeparator,
|
|
123
|
-
}
|
|
124
|
-
}],
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
</script>
|
|
129
|
-
|
|
130
|
-
```
|
1
情報の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -49,4 +49,82 @@
|
|
|
49
49
|
■要素１：５
|
|
50
50
|
■要素２：１.５
|
|
51
51
|
|
|
52
|
-
詳しい方アドバイス頂けると助かります。
|
|
52
|
+
詳しい方アドバイス頂けると助かります。
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<script>
|
|
56
|
+
|
|
57
|
+
function thousandsSeparator(value, index, values) {
|
|
58
|
+
value = value.toString().split(/(?=(?:...)*$)/).join(',');
|
|
59
|
+
return value;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
var ctx = document.getElementById("BarChart").getContext('2d');
|
|
63
|
+
var DiskChart = new Chart(ctx, {
|
|
64
|
+
type: 'bar',
|
|
65
|
+
data: {
|
|
66
|
+
labels:[
|
|
67
|
+
{% for item in x_label_data %}
|
|
68
|
+
'{{item}}',
|
|
69
|
+
{% endfor %}
|
|
70
|
+
],
|
|
71
|
+
datasets: [
|
|
72
|
+
{% for product_name in product_list %}
|
|
73
|
+
{
|
|
74
|
+
label: "{{product_name}}",
|
|
75
|
+
data: [
|
|
76
|
+
{% for time_label_data in x_label_data %}
|
|
77
|
+
{% for date, product, total in matrix_list_data %}
|
|
78
|
+
{% if product == product_name %}
|
|
79
|
+
{% if date == time_label_data %}
|
|
80
|
+
{{total}},
|
|
81
|
+
{% endif %}
|
|
82
|
+
{% endif %}
|
|
83
|
+
{% endfor %}
|
|
84
|
+
{% endfor %}
|
|
85
|
+
],
|
|
86
|
+
},
|
|
87
|
+
{% endfor %}
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
options: {
|
|
91
|
+
responsive: true,
|
|
92
|
+
tooltips: {
|
|
93
|
+
mode: 'nearest',
|
|
94
|
+
intersect: false,
|
|
95
|
+
mode: 'index',
|
|
96
|
+
callbacks: {
|
|
97
|
+
label: (item, data) => {
|
|
98
|
+
const { label } = data.datasets[item.datasetIndex];
|
|
99
|
+
const value = item.value.replace('NaN', '');
|
|
100
|
+
return value && `${label}: ${value}`;
|
|
101
|
+
},
|
|
102
|
+
afterTitle: (items, data) => {
|
|
103
|
+
const values = items.map(e => e.value !== 'NaN' ? +e.value : 0);
|
|
104
|
+
return `合計値: ${values[0] + values[1]}`;
|
|
105
|
+
},
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
scales: {
|
|
109
|
+
xAxes: [{
|
|
110
|
+
maxBarThickness: 70,
|
|
111
|
+
stacked: true,
|
|
112
|
+
ticks: {
|
|
113
|
+
autoSkip: true,
|
|
114
|
+
maxRotation:0,
|
|
115
|
+
minRotation:0
|
|
116
|
+
},
|
|
117
|
+
}],
|
|
118
|
+
yAxes: [{
|
|
119
|
+
stacked: true,
|
|
120
|
+
ticks:{
|
|
121
|
+
min: 0,
|
|
122
|
+
userCallback: thousandsSeparator,
|
|
123
|
+
}
|
|
124
|
+
}],
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
```
|