基于Label的Chart.js条形图加载数据 [英] Chart.js Bar chart load data based on Label

问题描述

我正在使用Chart.js制作条形图。我需要在条形图中显示12个月的数据。所以在2016年，我只有二月，三月和四月的数据。在标签im中，以年份1月2016年至2016年12月为例，加载所有12个月。

I'm using Chart.js for bar chart. I need to display 12 months data in bar chart. So in 2016 year i have only feb,mar and apr i have data. In label im loading all 12 months with year example Jan2016 to Dec2016.

var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
    var startmonth = ["Dec", "Nov", "Oct", "Sep", "Aug", "Jul",
"Jun", "May", "Apr", "Mar", "Feb", "Jan"
    ];
var itemMonths = [];
 var start;
        var end = 11;
        var month;
        var year;

        var date = new Date();

        month = date.getMonth();
        year = parseInt(Result[0].yearfromdb); //getting createddate year from db
        start = 0;
        for (var i = 0; i < 12; i++) {
            var months = monthNames[start];
            itemMonths.push(months + year);
            start = start + 1;
            if (start == 12) {
                start = 0;
                year = year + 1;
            }
        }

 for (var i in Result)
        {


            itemCountList.push( Result[i].Counts );// Result is List from Db contains Feb,mar and apr total counts..


        }

 var mybarChart = null;
        var ctx = document.getElementById("mybarChart");

         mybarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: itemMonths
                ,
                datasets: [{
                    label: 'Total Count',
                    backgroundColor: "#26B99A",
                    data: itemCountList
                }]
            },

            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            steps: 10,
                            stepValue: 5,
                            max: 100

                        }
                    }],
                    xAxes: [{

                        steps: 10,
                        stepValue: 5,
                        max: 12
                    }]

                }
            }
         });

我的问题是，数据是从jan，feb，march而不是feb，mar，apr加载的。 ...
如何执行此操作？请帮助我...

My problem is , data is loading from jan,feb,march instead of feb,mar,apr.... How to do this? please help me...

推荐答案

 var Result=[];
        Result.push({Months:"Feb",Years:2016,Counts:6});
        Result.push({Months:"Mar",Years:2016,Counts:1});
        Result.push({Months:"Apr",Years:2016,Counts:1});
        for(var j in itemMonths)
        {
         for(var i in Result)
        {
        if(itemMonths[j]==Result[i].Months+Result[i].Years)
        {

     itemCountList[j]=Result[i].Counts;
        //itemCountList.push( Result[i].Counts )
        }

        }
        }

尝试一下...

这篇关于基于Label的Chart.js条形图加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！