为每个项目创建具有不同系列数的多系列条形图

Question

我目前正在一个项目中使用 highcharts，并且很难创建我需要的图表。我对此进行了很多研究，我认为 highcharts 无法以我尝试的方式呈现数据，我可能需要将其拆分为多个图表，这将是完成我的任务的“hacky”方式想做。

var mockData = [
{
    name: 'Southwest',
    partners: ['A1', 'B2', 'C3', 'D4', 'E5'],
    data: [23, 42, 67, 53]
},{
    name: 'Delta',
    partners: ['F6', 'G7'],
    data: [55, 32]
},{
    name: 'American Airlines',
    partners: ['H8', 'I9', 'J10', 'K11', 'L12', 'M13'],
    data: [7, 25, 14, 78, 31, 55]
},{
    name: 'China Air',
    partners: ['N14', 'O15', 'P16', 'Q17', 'R18'],
    data: [1, 65, 35, 46, 74]
},{
    name: 'Air Mexico',
    partners: ['S19', 'T20', 'U21', 'V22', 'W23', 'X24', 'Y25', 'Z26', 'AA27', 'AB28', 'AC29', 'AD30'],
    data: [87, 24, 76, 5, 57, 67, 43, 47, 56, 19, 20, 32]
}];

我希望看到每个项目的名称（西南、三角洲、AA..）显示为 y 轴上的标签以及每个“合作伙伴”的名称（A1、B2、C3...），显示在每个条中，并带有确定条长度的相应数据。因此，在这种情况下，西南航空将有 5 个酒吧，达美航空将有 2 个，AA 6 个，中国航空 5 个和墨西哥航空 12 个。每个酒吧都标有合作伙伴名称。

我认为问题在于 highcharts 不支持为每个特定项目设置不同数量的系列。我不想用零来使所有图表都有相同数量的系列（条形）。

到目前为止，我看到的唯一选择是为 mockData 中的每个项目创建一个单独的 highchart 条形图，并尝试使其看起来像 1 个连续图。

此外，我有点担心为此渲染 1 个大条形图，因为有些项目可能有多达 250 个合作伙伴......所以这个图表会很大。

我希望这个问题很容易理解，但我可以澄清任何混淆。

提前谢谢你。

Answer 1

我不确定这个图表应该是什么样子，所以我建议使用grouped categories插件来显示数据：http://jsfiddle.net/TFhd7/754/

不过，如你所说，渲染1000条柱线是没有问题的，但是图表的可读性会很差（只是相乘的数据，见：http://jsfiddle.net/TFhd7/755/）

Highcharts 的示例代码：

var categories = [],
  seriesData = [];

$.each(mockData, function(i, item) {
  categories.push({
    name: item.name,
    categories: item.partners
  });
  seriesData = seriesData.concat(item.data);
});

var chart = new Highcharts.Chart({
  chart: {
    renderTo: "container",
    type: "bar"
  },
  legend: {
    enabled: false
  },
  series: [{
    data: seriesData
  }],
  xAxis: {
    categories: categories,
    labels: {
      x: -4
    }
  }
});