Chart.js 条形图基于Label加载数据答案

【问题标题】：Chart.js Bar chart load data based on LabelChart.js 条形图基于Label加载数据
【发布时间】：2017-02-01 06:31:29
【问题描述】：

我将 Chart.js 用于条形图。我需要在条形图中显示 12 个月的数据。所以在 2016 年，我只有 2 月、3 月和 4 月的数据。在标签中加载所有 12 个月的年份示例 Jan2016 到 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.... 这该怎么做？请帮帮我...

【问题讨论】：

您能否为您的问题创建一个工作示例？
小提琴不工作，您必须提供 Result 的值才能使其工作
jsfiddle.net/apguadpb/12

标签： javascript charts

【解决方案1】：

 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 )
        }

        }
        }

试试这个...

【讨论】：

【解决方案2】：

你的开始取决于年份，所以：

year = parseInt(Result[0].yearfromdb); //getting createddate year from db
start = (year === 2016? 1 : 0);

【讨论】：

这不是今年的问题。我有 2016 年 2 月、2016 年 3 月和 2016 年 4 月的数据。但它显示 2016 年 2 月、2016 年 2 月和 2016 年 3 月，因为我正在提供数据：itemCountList where itemCountList 从数据库推送数据

【解决方案3】：

您的代码的问题是数据点的数量不等于标签的数量。由于此图表在 x 轴标签的开头绘制了可用的 3 个数据点。

要解决此问题，您可以使数据点计数与数据标签计数相同。

试试这个，这里我在结果数组 id 中检查给定月份的数据点是否可用，然后将该值插入数据点数组，否则插入 0 值。

for (var i = 0; i < 12; i++) {
   var months = monthNames[start];
   var monthValue = 0;
   itemMonths.push(months + year);
   start = start + 1;
   if (start == 12) {
     start = 0;
     year = year + 1;
   }

   var dataObj = $.grep(Result, function(a) {
     return a.Months == months
   })[0];
   var monthValue = dataObj !== undefined ? dataObj.Counts : 0;
   itemCountList.push(monthValue)
 }

https://jsfiddle.net/6u7a1dm4/

【讨论】：