Chart.js Данные по загрузке баров на основе метки

Я использую Chart.js для гистограммы. Мне нужно отобразить 12-месячные данные на гистограмме. Так что в 2016 году у меня есть только feb, mar и apr у меня есть данные. В ярлыке im загружаются все 12 месяцев с примером года с января 2012 года по декабрь 2012 года.Chart.js Данные по загрузке баров на основе метки

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

       } 
      } 
     });

Моя проблема, данные загружаются из январь, февраль, марш вместо фев мар, апрель .... Как это сделать? Пожалуйста, помогите мне ...

источник

2017-02-01 RUPA

могли бы вы создать рабочий пример вашей проблемы? – Deep

скрипка не работает, вам нужно будет указать значение Результат, чтобы заставить его работать – Deep

https://jsfiddle.net/apguadpb/12/ – RUPA

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

     } 
     }

Попробуйте это ...

источник

2017-02-01 07:45:33 IMRUP

Спасибо, много ... – RUPA

Ваш старт зависит от года, так:

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

источник

2017-02-01 06:41:04 rulo4

Это не вопрос года .. У меня есть данные для feb2016, mar2016 и apr2016.But его отображение jan2016, feb2016 и mar2016, потому что im дает данные: itemCountList, где itemCountList толкает данные из базы данных – RUPA

Вопрос с вашим кодом является то, что подсчет точек данных не равно счету меток. В связи с этим график отображает доступные 3 точки данных справа от начала меток оси x.

Чтобы исправить это, вы можете сделать так, чтобы ваши точки данных совпадали с метками данных.

Попробуйте это, здесь я проверяю, доступна ли точка данных в течение определенного месяца в массиве результатов массива да, затем вставьте это значение в массив точек данных еще вставить значение 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/

источник

2017-02-01 08:32:50 Deep

Chart.js Данные по загрузке баров на основе метки

ответ

Смежные вопросы