[英]Right way to Plot Dynamic Grouped Bar 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
}
});
非常感謝您的幫助。 謝謝!
因此,對於以某種方式遇到相同問題的每個人,這是我得到答案的鏈接 。 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.