Как динамически добавить набор данных с данными json для chart.js - PullRequest
0 голосов
/ 09 июля 2019

Я использую 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 или некоторый набор структурных данных, как указано выше?

Спасибо за вашу помощь. Хорошего дня!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...