Chart.js-将数组中的数据动态加载到数据集中

Question

我目前需要将数据动态加载到chart.js中，如下所示，我正在手动创建数据集中的每个块：

var outcomeData = "['Outcomes','Abstinent','Improved','Unchanged','Deteriorated'],['2015/16',18036,11414,14430,1880],['2016/17',17642,11688,14010,1738],['2017/18',17282,10796,13542,1686]";
    var avgDaysUseData = "['year','AvgDaysUseAtStart','AvgDaysUseAtReview'],['2015/16',21.6,8.3],['2016/17',22.2,8.5],['2017/18',22.1,8.6]";
    var outcomeArray = outcomeData.replace(/\[/g, "").replace(/\]/g, "").replace(/\'/g, "").split(',');
    var avgDaysUseArray = avgDaysUseData.replace(/\[/g, "").replace(/\]/g, "").replace(/\'/g, "").split(',');
    var reportingPeriods = [];
    var outcomeNames = [];
    var outcomeValues = [];
    var avgDaysUseValues = [];

    $.each(avgDaysUseArray,
        function (index, value) {
            if (Number.isNaN(value) === false) {
                value = parseFloat(value);
                avgDaysUseValues.push(value);
            }
        });

    $.each(outcomeArray,
        function (index, value) {
            var reportingPeriod = new RegExp('\\d{4}(\/)\\d{2}');
            var isReportingPeriod = reportingPeriod.test(value);
            if (isReportingPeriod) {
                reportingPeriods.push(value);
            }
            else {
                var outcomeName = new RegExp('[a-zA-Z]');
                var isOutcomeName = outcomeName.test(value);
                if (isOutcomeName) {
                    if (value !== "Outcomes") {
                        outcomeNames.push(value);
                    }
                } else {
                    value = parseInt(value);
                    outcomeValues.push(value);
                }
            }
        });

    var ctx = document.getElementById('chart');

    var outcomeChart = new Chart(ctx,
        {
            type: 'bar',
            data: {
                labels: reportingPeriods,
                datasets: [
                    {
                        type: 'line', fill: false, lineTension: 0,
                        label: 'Average days of use at start',
                        data: [avgDaysUseValues[4], avgDaysUseValues[7], avgDaysUseValues[10]],
                        yAxisId: 'y-axis-1',
                        borderColor: 'Black',
                        backgroundColor: 'Black',
                        borderWidth: 2
                    },
                    {
                        type: 'line', fill: false, lineTension: 0,
                        label: 'Average days of use at review',
                        data: [avgDaysUseValues[5], avgDaysUseValues[8], avgDaysUseValues[11]],
                        yAxisId: 'y-axis-1',
                        borderColor: 'Blue',
                        backgroundColor: 'Blue',
                        borderWidth: 2
                    },
                    {
                        type: 'bar',
                        label: outcomeNames[0],
                        data: [outcomeValues[0], outcomeValues[4], outcomeValues[8]],
                        yAxisID: 'y-axis-2',
                        borderColor: '#FF9900',
                        backgroundColor: '#FF9900',
                        borderWidth: 2
                    },
                    {
                        type: 'bar',
                        label: outcomeNames[1],
                        data: [outcomeValues[1], outcomeValues[5], outcomeValues[9]],
                        yAxisID: 'y-axis-2',
                        borderColor: '#FF6400',
                        backgroundColor: '#FF6400',
                        borderWidth: 2
                    },
                    {
                        type: 'bar',
                        label: outcomeNames[2],
                        data: [outcomeValues[2], outcomeValues[6], outcomeValues[10]],
                        yAxisID: 'y-axis-2',
                        borderColor: '#FF0000',
                        backgroundColor: '#FF0000',
                        borderWidth: 2
                    },
                    {
                        type: 'bar',
                        label: outcomeNames[3],
                        data: [outcomeValues[3], outcomeValues[7], outcomeValues[11]],
                        yAxisID: 'y-axis-2',
                        borderColor: '#9A0033',
                        backgroundColor: '#9A0033',
                        borderWidth: 2
                    }
                ]
            },
            options: { scales: {
                xAxes: [
                    {
                        gridLines: {
                            display: false
                        },
                        scaleLabel: { display: true, labelString: 'Reporting Period', fontStyle: 'italic' },
                        position: 'bottom',
                        ticks: { fontStyle: 'italic' },
                        barPercentage: 0.95,
                        categoryPercentage: 0.15
                    }
                ],
                yAxes: [
                    {
                        scaleLabel: { display: true, labelString: 'Average no. of days', fontStyle: 'italic' },
                        position: 'right', id: 'y-axis-1', type: 'linear',
                        ticks: { min: 0, beginAtZero: true, max: 28 },
                        gridLines: {display: true}
                    },
                    {
                        scaleLabel: { display: true, labelString: 'No. of clients', fontStyle: 'italic' },
                        position: 'left', id: 'y-axis-2',type: 'linear',
                        gridLines: { display: false }
                    }]
            },
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'right',
                    display: true,
                    onClick: null,
                    labels: {
                        fontColor: '#000000'
                    }
                }
            }
        });

    outcomeChart.aspectRatio = 0;


    $('#chart').bind('contextmenu',
        function(e) {
            return false;
        });

我已在代码笔中提供了此代码以显示正在产生的内容：

https://codepen.io/gameloregeek/pen/GPXBdp

我创建了许多数组，数据通过视图模型从控制器动态加载到这些数组中。

如何将在resultArray和avgDaysUseArray中找到的数据加载到chart.js数据集中？