chart.js - Chartjs 2 : Multi level/hierarchical category axis in chartjs

Question

是否可以定义具有多级别/类别轴的条形图？

例如，我想显示地区/省类别，如下 Excel 图表所示:

我找到了this使用多个 xAxes 的示例。

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

问题是两个轴似乎没有真正链接，第二个轴的对齐是基于值而不是在较低级别类别的中间对齐。这种情况会导致问题

在 Chart.js 中是否有一种干净的方法来实现此目的？

更新:我最终创建了一个 feature request在 Chartjs 上。

Answer 1

您可以通过datesets分别为不同的轴提供值，并提供具有不同配置选项(borderColor，pointBackgroundColor，pointBorderColor)等的对象，我希望它会有所帮助.

这里是更新的链接(您分享的 fiddle )Updated Fiddle

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

// here i added another data sets for xAxisID 2 and it works just fine
{
  label: '# of Potatoes',
  xAxisID:'xAxis2',
  data: [9, 17, 28, 26, 29, 9]
}]

}

我希望能解决您的问题:)