0
I chart.js使用してグループ化された棒グラフで表示されるべき次のデータがあります。左側に 正しい方法はchart.js
- 平均配達日を週名あたり同士の横の下
- ルート名で
私のJSONデータ(全てのデータがここにありません):
{"data":[{"RouteID":"MK","week_name":"2016 Week 2","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 2","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 3","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 4","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 4","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 4","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 5","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 5","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 6","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 6","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 7","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 7","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 8","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 9","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 9","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 10","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 11","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 12","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 12","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 12","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 12","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 12","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 13","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 13","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 14","Average_Delivery_Days":5},{"RouteID":"MK","week_name":"2016 Week 14","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 14","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 14","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 14","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 15","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 15","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2016 Week 15","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 15","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 15","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 16","Average_Delivery_Days":5},{"RouteID":"TSM","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 17","Average_Delivery_Days":5},{"RouteID":"MK","week_name":"2016 Week 17","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 17","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 17","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 17","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 18","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 18","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 19","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 19","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"MK","week_name":"2016 Week 20","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 20","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 21","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 22","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 22","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 23","Average_Delivery_Days":19},{"RouteID":"TSM","week_name":"2016 Week 23","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 23","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 23","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 23","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 24","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 24","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 25","Average_Delivery_Days":5},{"RouteID":"CAV","week_name":"2016 Week 25","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 25","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 25","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 25","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 26","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 26","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 27","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 27","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 28","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 28","Average_Delivery_Days":4},{"RouteID":"MK","week_name":"2016 Week 28","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 28","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 28","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 29","Average_Delivery_Days":5},{"RouteID":"PQU","week_name":"2016 Week 29","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 29","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 29","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 29","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 30","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 30","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2017 Week 48","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2017 Week 49","Average_Delivery_Days":10},{"RouteID":"CAV","week_name":"2017 Week 49","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2017 Week 49","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2017 Week 49","Average_Delivery_Days":1}],"filter_by":"Weekly"}
しかし、私はちょうどそれが右以来、私の理解に基づいて取得することはできませんが、ルート名が右のそれを作るために列名でなければなりません。
そして、私のサンプルクエリ:
SELECT [RouteID],
CAST(DATEPART(YEAR,[DeliveryDate]) as varchar) + ' Week ' + CAST(DATEPART(WEEK,[DeliveryDate]) AS varchar) AS week_name,
AVG(DATEDIFF(day, CONVERT(date, [UnloadDate]), CONVERT(date, [DeliveryDate]))) as Average_Delivery_Days
FROM [CARGODB].[dbo].[Cargo_Transactions]
WHERE [DeliveryDate] IS NOT NULL AND [DeliveryDate] != 0
AND CONVERT(date, [DeliveryDate]) BETWEEN '2016-01-01' AND GETDATE()
AND [UnloadDate] IS NOT NULL AND [UnloadDate] != 0 AND [DeliveryDate] > [UnloadDate]
AND [Deleted] = 0 and [StageID] = 'D' AND [RouteID] IN ('TSM', 'C', 'MK', 'CAV', 'PQU')
GROUP BY DATEPART(YEAR,[DeliveryDate]), DATEPART(WEEK,[DeliveryDate]), [RouteID]
ORDER BY DATEPART(YEAR,[DeliveryDate]), DATEPART(WEEK,[DeliveryDate]), Average_Delivery_Days desc
マイChart.jsコード:
var date_created = [];
var average_delivery_days = [];
var route_name = [];
var oss_new_customers = [];
for(var i in data.data) {
date_created.push(data.data[i]['week_name']);
average_delivery_days.push(data.data[i]['Average_Delivery_Days']);
route_name.push(data.data[i]['RouteID']);
}
var chartdata = {
labels: date_created,
datasets : [
{
label: route_name,
backgroundColor: 'rgba(52, 152, 219,1.0)',
data: average_delivery_days,
legend: {
onClick: function(e){
hidden:true
}
}
}
]
};
ctx = $("#delivery_performance_chart");
delivery_performance_barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
tooltips: {
mode: 'index',
footerFontStyle: 'normal'
},
hover: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
show: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
show: true
}
}]
},
maintainAspectRatio: false,
responsive:true
}
});
あなたのご協力をよろしくお願い申し上げます。ありがとう!