Chart.js棒グラフは、ラベルに基づいてデータをロードします

Question

私は棒グラフのChart.jsを使用しています。私は棒グラフで12ヶ月のデータを表示する必要があります。だから、2016年には私はfeb、marとaprのデータしか持っていない。ラベルイムでは、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 
        }] 

       } 
      } 
     }); 

私の問題は、データが1月、2月からロードされ、代わりに2月3月、傷、4月.... はどのようにこれを行うには？私を助けてください...

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

     } 
     } 

はこれを試してみてください...

Answer 2

あなたのスタートはそう、年によって異なります

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

Answer 3

問題をあなたのコードでは、そのデータポイントの数ラベルの数と同じではありません。このグラフにより、x軸のラベルの先頭から3つのデータポイントを右にプロットしています。

これを修正するには、データポイント数をデータラベル数と同じにすることができます。

これを試してみてください。データポイントがResult配列IDで指定された月に使用可能かどうかを確認しています。その値をデータポイント配列に挿入します。

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/