Chartjs 2：ChartJS中的多级/分层类别轴 [英] Chartjs 2: Multi level/hierarchical category axis in chartjs

问题描述

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

Is it possible to define a bar chart with a multi level/category axis?

例如，我想在此显示地区/省类别Excel图表：

For instance I'd like to display the Region/Province categories like in this Excel chart:

我发现此示例使用多个xAxes。

I found this example using multiple 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 "";
          }
        }
      }
    }
  ]

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

The problem is it seems that the two axes are not really linked and the alignment of second axis is based on values instead of aligning in middle of lower level category. this case cause issues

在chart.js中是否有一种干净的方法来实现这一目标？

Is there a clean way to achieve this in chart.js?

更新：
我最终创建了一个功能请求关于chartjs。

Update: I ended up creating a feature request on chartjs.

推荐答案

您可以通过 datesets 为不同的轴分别提供值并提供具有不同配置选项（borderColor，pointBackgroundColor，pointBorderColor）等的对象，希望对您有所帮助。

you can provide value separately for different axis via datesets and provide an object with different configuration option (borderColor, pointBackgroundColor, pointBorderColor) etc, i hope It'll help.

这是带有更新的链接（您共享的小提琴）更新的小提琴

here is the link for the with an update (fiddle you shared) 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]
}]

}

我希望可以解决您的问题:)

I hope that solves your problem :)

这篇关于Chartjs 2：ChartJS中的多级/分层类别轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！