Я использую chartjs (составная диаграмма) для отображения некоторых данных.
Например:
Created Status TotalActivity
2018-11-10 Completed 18
2018-11-10 Reject 20
2018-11-10 Terminated 10
2018-11-12 In Progress 11
2018-11-15 Send Back 15
Я пытаюсь следовать этому , но все равно ничем не отличается.
function getChartData() {
var urlWeb = serverData.Config.Urls.WorkflowWeb;
$.ajax({
url: urlWeb + "Home/GetStatisticProcessWF",
type: 'POST',
dataType: 'json',
success: function (response) {
var data = response.Data;
data.forEach(function (field, i) {
var dates = moment(field.CreatedDate).format('DD-MMM-YYYY');
if (lastFiveDays.indexOf(dates) === -1) {
lastFiveDays.push(dates);
}
getDataset(field, i);
listCount = data.length;
processChart.update();
});
}
});
};
function initChart() {
var ctx = document.getElementById('chartProcessCreated').getContext('2d');
processChart = new Chart(ctx, {
type: 'bar',
//data: {
// labels: [],
// datasets: [{
// data: [],
// label: '',
// }]
//},
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Created Process in Last Five Days'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
}
function getDataset(data, i) {
var dates = moment(data.CreatedDate).format('DD-MMM-YYYY');
var chartData = processChart.data;
if (chartData.labels.indexOf(dates) === -1) {
chartData.labels.push(dates);
}
switch (data.ProcessStatus) {
case "In Progress":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.blue).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.blue;
chartData.datasets[0].borderWidth = 1;
break;
case "Sent Back":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.orange).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.orange;
chartData.datasets[0].borderWidth = 1;
break;
case "Rejected":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.red).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.red;
chartData.datasets[0].borderWidth = 1;
break;
case "Draft":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.yellow).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.yellow;
chartData.datasets[0].borderWidth = 1;
break;
case "Completed":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.green).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.green;
chartData.datasets[0].borderWidth = 1;
break;
case "Terminated":
chartData.datasets[0].data.push(data.Total);
chartData.datasets[0].label = data.ProcessStatus;
chartData.datasets[0].backgroundColor = color(window.chartColors.grey).alpha(0.5).rgbString(),
chartData.datasets[0].borderColor = window.chartColors.grey;
chartData.datasets[0].borderWidth = 1;
break;
default:
break;
}
}
I expected the dynamic dataset to fill the static like this:
barChartData = {
labels: ["10-Nov-2018", "12-Nov-2018", "15-Nov-2018"];,
datasets: [
{
label: 'Terminated',
backgroundColor: color(window.chartColors.grey).alpha(0.5).rgbString(),
borderColor: window.chartColors.grey,
borderWidth: 1,
data: [10,20,30,40,50]
},
{
label: 'Sent Back',
backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
borderColor: window.chartColors.orange,
borderWidth: 1,
data: [10, 20, 30, 40, 50]
},
{
label: 'Rejected',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
borderWidth: 1,
data: [10, 20, 30, 40, 50]
},
{
label: 'Draft',
backgroundColor: color(window.chartColors.yellow).alpha(0.5).rgbString(),
borderColor: window.chartColors.yellow,
borderWidth: 1,
data: [10, 20, 30, 40, 50]
},
{
label: 'In Progress',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [10, 20, 30, 40, 50]
},
{
label: 'Completed',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
data: [10, 20, 30, 40, 50]
}
]
};
Как я могу переместить или зациклить набор данных, основанный на json, на barChartData
или некоторый набор структурных данных, как указано выше?
Спасибо за вашу помощь.
Хорошего дня!