系列ごとに異なる項目を持つ複数の棒グラフを作成する

Question

私は現在、プロジェクトでハイチャートを使用しており、必要なチャートを作成するのに苦労しています。私はこれをかなり研究してきました。ハイチャートはデータを私が試みている方法でレンダリングできるとは思わないし、これを複数のチャートに分割する必要があるかもしれません。これは、やりたい

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の名前をラベルとして表示されます。 ..）、各バーに表示され、バーの長さを決定する対応するデータである。したがって、この場合、Southwestには5バー、デルタには2、AA 6、China Air 5、Air Mexico 12が割り当てられます。各バーにはパートナー名が表示されます。

ハイチャートは、特定のアイテムごとに異なる数のシリーズをサポートしていないということが問題だと思います。私は、すべてのチャートに同じ量のシリーズ（棒グラフ）を作るためにゼロを入れたくありません。

私が見る唯一の代替案は、mockDataの各項目に別々のハイチャート棒グラフを作成し、それを1つの連続グラフのように見せようとすることです。

さらに、いくつかのアイテムが250のパートナーを持つことができるので、1つの大きな棒グラフをレンダリングすることに少し心配しています。このチャートは非常に大きくなります。

私はこの質問が分かりやすいと思っていますが、私は混乱を明確にすることができます。

ありがとうございます。

Answer 1

私はこのチャートを見て仮定どのようにわからないので、私は、データを表示するために、grouped categoriesプラグインを使用することをお勧め：あなたが言ったようにhttp://jsfiddle.net/TFhd7/754/

はしかし、それはバー1000をレンダリングする問題ではないのですが、読みやすさ

サンプルコードをHighchartsために：チャートの（http://jsfiddle.net/TFhd7/755/を参照してください、ちょうど増倍データ）：非常に悪いになります

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