chart js Etiketten und Gruppierungslabels

Question

Brauchen Sie bitte ein wenig Schulausbildung. Ich habe ein Arbeitsdiagramm Ich muss es ein bisschen ändern. Meine Daten haben vier Felder omlPartgroup, xmonth, xyear und QTY Ich möchte, dass mein Diagramm jede omlpartgroup zeigt und dann den Monat und das Jahr in dieser Gruppe, so würde ich 12 Bars für jede Teilgruppe haben und die Beschriftungen würden die Teilgruppe mit sein Untergruppen von Jahr und Monat.

meinen Code

window.jQuery(document).ready(function(){ 
window.jQuery.ajax({ 
    url:"http://localhost/html5/data.php", 
    method:"GET", 
    success: function(data){ 
     console.log(data) 
     var omlPartgroupid =[]; 
     var xyear =[]; 
     var xmonth =[]; 
     var QTY=[]; 

     for(var i in data){ 
      omlPartgroupid.push("PartGroup"+ data[i].omlPartgroupid); 
      xyear.push(data[i].xyear); 
      xmonth.push(data[i].xmonth); 
      QTY.push(data[i].QTY); 
      } 
     var chartdata ={ 
      labels:xmonth, 
      datasets :[ 
      { 
      backgroundColor: 'rgba(200,200,200,0.75)', 
      borderColor: 'rgba(200,200,200,0.75)', 
      hoverBackground: 'rgba(200,200,200,1)', 
      hoverBorderColor: 'rgba(200,200,200,1)', 
      data:QTY 
      } 
       ] 
     }; 
     var ctx=$("#mycanvas"); 
     var barGraph =new Chart(ctx,{ 
      type: 'bar', 
      data: chartdata 

     }); 
    }, 
    error: function(data){ 
     console.log(data); 
    } 

}); });

meine Daten

[{"omlPartgroupid":"191 ","xmonth":"10","xyear":"2015","QTY":"52"},{"omlPartgroupid":"191 ","xmonth":"11","xyear":"2015","QTY":"145"},{"omlPartgroupid":"191 ","xmonth":"12","xyear":"2015","QTY":"122"},{"omlPartgroupid":"191 ","xmonth":"1","xyear":"2016","QTY":"348"},{"omlPartgroupid":"191 ","xmonth":"2","xyear":"2016","QTY":"460"},{"omlPartgroupid":"191 ","xmonth":"3","xyear":"2016","QTY":"187"},{"omlPartgroupid":"191 ","xmonth":"4","xyear":"2016","QTY":"109"},{"omlPartgroupid":"191 ","xmonth":"5","xyear":"2016","QTY":"234"},{"omlPartgroupid":"191 ","xmonth":"6","xyear":"2016","QTY":"166"},{"omlPartgroupid":"191 ","xmonth":"7","xyear":"2016","QTY":"186"},{"omlPartgroupid":"191 ","xmonth":"8","xyear":"2016","QTY":"250"},{"omlPartgroupid":"191 ","xmonth":"9","xyear":"2016","QTY":"1077"},{"omlPartgroupid":"191 ","xmonth":"10","xyear":"2016","QTY":"594"},{"omlPartgroupid":"193 ","xmonth":"10","xyear":"2015","QTY":"39"},{"omlPartgroupid":"193 ","xmonth":"11","xyear":"2015","QTY":"183"},{"omlPartgroupid":"193 ","xmonth":"12","xyear":"2015","QTY":"136"},{"omlPartgroupid":"193 ","xmonth":"1","xyear":"2016","QTY":"212"},{"omlPartgroupid":"193 ","xmonth":"2","xyear":"2016","QTY":"460"},{"omlPartgroupid":"193 ","xmonth":"3","xyear":"2016","QTY":"176"},{"omlPartgroupid":"193 ","xmonth":"4","xyear":"2016","QTY":"187"},{"omlPartgroupid":"193 ","xmonth":"5","xyear":"2016","QTY":"174"},{"omlPartgroupid":"193 ","xmonth":"6","xyear":"2016","QTY":"151"},{"omlPartgroupid":"193 ","xmonth":"7","xyear":"2016","QTY":"164"},{"omlPartgroupid":"193 ","xmonth":"8","xyear":"2016","QTY":"237"},{"omlPartgroupid":"193 ","xmonth":"9","xyear":"2016","QTY":"798"},{"omlPartgroupid":"193 ","xmonth":"10","xyear":"2016","QTY":"662"},{"omlPartgroupid":"195 ","xmonth":"10","xyear":"2015","QTY":"9"},{"omlPartgroupid":"195 ","xmonth":"11","xyear":"2015","QTY":"38"},{"omlPartgroupid":"195 ","xmonth":"12","xyear":"2015","QTY":"35"},{"omlPartgroupid":"195 ","xmonth":"1","xyear":"2016","QTY":"68"},{"omlPartgroupid":"195 ","xmonth":"2","xyear":"2016","QTY":"161"},{"omlPartgroupid":"195 ","xmonth":"3","xyear":"2016","QTY":"73"},{"omlPartgroupid":"195 ","xmonth":"4","xyear":"2016","QTY":"69"},{"omlPartgroupid":"195 ","xmonth":"5","xyear":"2016","QTY":"56"},{"omlPartgroupid":"195 ","xmonth":"6","xyear":"2016","QTY":"55"},{"omlPartgroupid":"195 ","xmonth":"7","xyear":"2016","QTY":"50"},{"omlPartgroupid":"195 ","xmonth":"8","xyear":"2016","QTY":"114"},{"omlPartgroupid":"195 ","xmonth":"9","xyear":"2016","QTY":"1046"},{"omlPartgroupid":"195 ","xmonth":"10","xyear":"2016","QTY":"883"},{"omlPartgroupid":"197 ","xmonth":"10","xyear":"2015","QTY":"34"},{"omlPartgroupid":"197 ","xmonth":"11","xyear":"2015","QTY":"76"},{"omlPartgroupid":"197 ","xmonth":"12","xyear":"2015","QTY":"114"},{"omlPartgroupid":"197 ","xmonth":"1","xyear":"2016","QTY":"173"},{"omlPartgroupid":"197 ","xmonth":"2","xyear":"2016","QTY":"327"},{"omlPartgroupid":"197 ","xmonth":"3","xyear":"2016","QTY":"134"},{"omlPartgroupid":"197 ","xmonth":"4","xyear":"2016","QTY":"125"},{"omlPartgroupid":"197 ","xmonth":"5","xyear":"2016","QTY":"200"},{"omlPartgroupid":"197 ","xmonth":"6","xyear":"2016","QTY":"104"},{"omlPartgroupid":"197 ","xmonth":"7","xyear":"2016","QTY":"99"},{"omlPartgroupid":"197 ","xmonth":"8","xyear":"2016","QTY":"191"},{"omlPartgroupid":"197 ","xmonth":"9","xyear":"2016","QTY":"845"},{"omlPartgroupid":"197 ","xmonth":"10","xyear":"2016","QTY":"578"},{"omlPartgroupid":"199 ","xmonth":"10","xyear":"2015","QTY":"35"},{"omlPartgroupid":"199 ","xmonth":"11","xyear":"2015","QTY":"75"},{"omlPartgroupid":"199 ","xmonth":"12","xyear":"2015","QTY":"76"},{"omlPartgroupid":"199 ","xmonth":"1","xyear":"2016","QTY":"105"},{"omlPartgroupid":"199 ","xmonth":"2","xyear":"2016","QTY":"229"},{"omlPartgroupid":"199 ","xmonth":"3","xyear":"2016","QTY":"147"},{"omlPartgroupid":"199 ","xmonth":"4","xyear":"2016","QTY":"73"},{"omlPartgroupid":"199 ","xmonth":"5","xyear":"2016","QTY":"50"},{"omlPartgroupid":"199 ","xmonth":"6","xyear":"2016","QTY":"58"},{"omlPartgroupid":"199 ","xmonth":"7","xyear":"2016","QTY":"103"},{"omlPartgroupid":"199 ","xmonth":"8","xyear":"2016","QTY":"4230"},{"omlPartgroupid":"199 ","xmonth":"9","xyear":"2016","QTY":"2570"},{"omlPartgroupid":"199 ","xmonth":"10","xyear":"2016","QTY":"730"}] 

Answer 1

Das hier verwiesen wird: https://github.com/chartjs/Chart.js/issues/2138

Der Großteil der es eine zweite Achse schafft. Ich habe einige der Setup hier weggelassen, aber Sie können einen JS Fiddle unten finden:

options: { 
     scales: { 
      xAxes:[ { 
       id: 'time', 
       type: 'category', 
       ticks: { 
        callback: function(label) { 
         var labelArray = label.split("|"); 
         return labelArray[0] + "/" + labelArray[1]; 
        } 
       } 
      }, 
      { 
       id: 'partGroup', 
       type: 'category', 
       gridLines: { 
        drawOnChartArea: false // only want the grid lines for one axis to show up 
       }, 
       ticks: { 
        callback: function(label) { 
         var labelArray = label.split("|"); 
         return labelArray[0] === "10" && labelArray[1] == "2015" ?  labelArray[2] : ""; 
        } 
       } 

      } 


      ] 
     } 
    } 

Hier ist ein Fiddle with your data