根据状态更改Chart.js堆积条形图条形图颜色

时间:2017-05-17 05:43:27

标签: bar-chart chart.js stacked-chart

我有Chart.js堆积条形图,我显示过去6个月收到的申请数量,比如1月到6月。现在我坚持这个:我必须根据状态为条形着色,所以一个条可以有多种颜色。我怎么能这样做?

当前代码:

$.ajax({
    url: "../Overiew/GetCandidate",
    data: '',
    type: "GET",
    dataType: "json",
    success: function (data) {
        console.log(data);
        var date = [];
        for (var i in data) {
            date.push(data[i].can_main_created_month
            }
            console.log(date);
            var count = [];
            for (var i = 0; i < date.length; i++) {
                if (count[date[i]]) {
                    count[date[i]]++;
                } else {
                    count[date[i]] = 1;
                }
            }
            count = Object.keys(count).map(v => count[v]);
            console.log(count);
            var status = [];
            for (var i in data) {
                status.push(data[i].can_main_status);
            }
            console.log(status);
            var inprocess = status[0]; //Blue Color
            var hired = status[1]; //Green Color
            var rejected = status[0]; //Red Color
            var data = {
                labels: ["January", "February", "March", "April", "May", "June"],
                datasets: [{
                    label: "Number of Records",
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,0.8)",
                    highlightFill: "rgba(151,187,205,0.75)",
                    highlightStroke: "rgba(151,187,205,1)",
                    data: [count[1], count[2], 0, 0, count[0], 0]
                }]
            };
            var ctx = $('#barChart').get(0).getContext("2d");
            var barchart = new Chart(ctx).Bar(data);
        }
    }
});

当前堆积条形图:

Current Stacked Bar Chart

0 个答案:

没有答案