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
}
});
귀하의 도움에 감사드립니다. 감사!