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

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

我希望看到每个项目的名称(Southwest、Delta、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
    }
  }
});