How to create two x-axes label using chart.js

前端 未结 3 1988
慢半拍i
慢半拍i 2020-12-16 00:54

There is a way to create two label for y-axes. But how do you make a multiple x-axes label in chart.js? eg: example as in this picture: How to group (two-level) axis labels<

3条回答
  •  旧时难觅i
    2020-12-16 01:49

    This question has already been answered on github here

    Here is a working JSFiddle

    var ctx = $("#c");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
        datasets: [{
          label: '# of Votes',
          xAxisID:'xAxis1',
          data: [12, 19, 3, 5, 2, 3]
        }]
      },
      options:{
        scales:{
          xAxes:[
            {
              id:'xAxis1',
              type:"category",
              ticks:{
                callback:function(label){
                  var month = label.split(";")[0];
                  var year = label.split(";")[1];
                  return month;
                }
              }
            },
            {
              id:'xAxis2',
              type:"category",
              gridLines: {
                drawOnChartArea: false, // only want the grid lines for one axis to show up
              },
              ticks:{
                callback:function(label){
                  var month = label.split(";")[0];
                  var year = label.split(";")[1];
                  if(month === "February"){
                    return year;
                  }else{
                    return "";
                  }
                }
              }
            }],
          yAxes:[{
            ticks:{
              beginAtZero:true
            }
          }]
        }
      }
    });
    
    
    
    
    
    

提交回复
热议问题