Chartjs 2：chartjs 中的多级/分层类别轴

Question

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

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

我发现这个例子使用多个 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中是否有一种干净的方法来实现这一点？

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

Answer 1

希望这可以帮助，

我做了一些研究，但找不到在 Chartjs 中实现您的解决方案的方法。Chartjs 有分组条形图，但没有像您的情况那样的子分组条形图。

Example: http://jsfiddle.net/harshakj89/ax3zxtzw/

这里有一些替代方案，

D3js ( https://d3js.org/ ) 可用于创建子分组条形图。数据可以从 csv 或 json 加载。D3 是高度可配置的，但你可能需要比 Chartsjs 付出一些努力。

https://plnkr.co/edit/qGZ1YuyFZnVtp04bqZki?p=preview
/sf/ask/2638301291/
/sf/ask/1103528891/

ZingChart 是一个商业工具，可用于实现带有子组的条形图。

https://www.zingchart.com/docs/chart-types/bar-charts/

但与这个库相比，我更喜欢 D3。因为 D3 受 BSD 许可。