如何使用chart.js的json数据动态添加数据集

Question

我正在使用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

我尝试关注this，但还是没什么。

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或类似上面的某些结构数据集？

感谢您的帮助。 祝你有美好的一天！