Chartjs - 多级 x 轴条形图的数据格式

Question

输入数据

Engine,Car,Brand,Efficiency
ABC212,Toyota Corolla,Toyota,1.95
ABC212,Toyota Yaris,Toyota,1.94
ABC212,Totyota Etios,Toyota,1.93
ABC212,Honda City,Honda,1.93
ABC212A,Honda Brio,Honda,1.91
DEF311,Toyota Camry,Toyota,1.90
DEF310,Toyota Prius,Toyota,1.82
DEF310,Ford Explorer,Ford,1.85
DEF310,Ford Endeavour,Ford,1.83
DEF305,Ford Fugo,Ford,1.79

根据上述数据，我需要在ChartJs中创建带有多级X轴的图表。使用MS Excel数据透视图创建的预期输出如下所示。这里将每个模型的效率绘制成条形图。每个组中的条形图按效率值的降序排序。我应该如何为这种图表创建数据？

- user3206440

---

你有检查过这个吗？ - Durga

你目前尝试了什么？ - xkeshav

Answer 1

我在我的 POC 中制作了这样的图表，其中使用了以下内容：

data: {
      labels: ["ABC212", "ABC212A",...],
      datasets: [
        {
          label: "ABC212",
          data: [val1, val2,....]
        }, {
          label: "ABC212A",
          data: [val3, val4,...]
        }
      ]
    }

- T. Shashwat

Answer 2

在没有确信这是最简单的解决方案的情况下，我提供了一些示例，其中使用第二个轴包含组的标签，但在扩展的数组中，以进行正确的对齐。

唯一的问题是，如果您为组启用旋转maxRotation>0，则文本将始终旋转，因为（由于缩放）它绑定到非常小的区域。

https://jsfiddle.net/h6z4apvo/

var myData = [
  ["ABC212","Toyota Corolla","Toyota",1.95],
  ["ABC212","Toyota Yaris","Toyota",1.94],
  ["ABC212","Totyota Etios","Toyota",1.93],
  ["ABC212","Honda City","Honda",1.93],
  ["ABC212A","Honda Brio","Honda",1.91],
  ["DEF311","Toyota Camry","Toyota",1.90],
  ["DEF310","Toyota Prius","Toyota",1.82],
  ["DEF310","Ford Explorer","Ford",1.85],
  ["DEF310","Ford Endeavour","Ford",1.83],
  ["DEF305","Ford Fugo","Ford",1.79]
];

/*Calculates group labels to a scaled array so that they can align better*/
function calculateGroupLabels(data){
  const scaleFactor=100;
  var labels = _(data)
  .groupBy((elem)=>elem[0])
  .map((entriesOnSameGroup, key)=>{
      var newSize = entriesOnSameGroup.length*scaleFactor;
      var newArray = new Array(newSize);
      newArray[0]="";
      newArray[newArray.length-1]="";
      newArray[parseInt((newArray.length-1)/2)]=key;
      return newArray;
  }).flatten().value()

  return labels;
}


var labels = calculateGroupLabels(myData);

var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      xAxisID:'modelAxis',
      data: myData.map((entry)=>entry[3])
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'modelAxis',
          type:"category",
          ticks:{
            //maxRotation:0,
            autoSkip: false,
            callback:function(label, x2, x3, x4){
              console.log("modelAxis", label, x2, x3, x4)
              return label;
            }
                   },
         labels:myData.map((entry=>entry[1]))
        },
        {
          id:'groupAxis',
          type:"category",
          gridLines: {
            drawOnChartArea: false,
          },
          ticks:{
            padding:0,
            maxRotation:0,
            autoSkip: false,
            callback:function(label){
                return label;
            }
          },
          labels:labels

        }],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});

- Marinos An