Question

我目前在项目中使用highcharts并且很难创建我需要的图表。我已经对此进行了相当多的研究，我不认为高级图表能够以我尝试的方式呈现数据，我可能需要将其拆分为多个图表，这将是＆＃ 39;哈克＆＃39;完成我想做的事情的方式。

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轴上的标签和每个合作伙伴的名称＆＃39; （A1，B2，C3 ......），在每个条形图中显示确定条形长度的相应数据。因此，在这种情况下，西南航空公司将有5个酒吧，Delta将拥有2个，AA 6，China Air 5和Air Mexico 12.每个酒吧都标有合作伙伴名称。

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

到目前为止，我看到的唯一选择是为mockData中的每个项目创建一个单独的高图条形图，并尝试使其看起来像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
    }
  }
});

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

1 个答案: