2016-03-28 14 views
0

私はそれが複数のカテゴリを持つ複数のシリーズをレンダリングしようとしている縦棒グラフを持っています。ハイスコ​​アをjsonで設定しているため、データを別の場所に設定する必要はありません。 xAxis.typeを 'category'に設定すると、カテゴリのシリーズデータが検索されることがわかりました。しかし、複数のシリーズやカテゴリでこれを行うと、カテゴリがちょっと混乱してしまいます。どのようにすれば、すべてのカテゴリが適切に表示されるようにすることができますか?梨は二度、アップルは現れない。ハイチャートでは、複数のシリーズで表示されるすべてのカテゴリとxAxisタイプをカテゴリに設定するにはどうすればよいですか?

$(function() { 
 
    $('#container').highcharts({ 
 
    "title": { 
 
    "text": "" 
 
    }, 
 
    "chart": { 
 
    "height": 400 
 
    }, 
 
    xAxis: { 
 
    type: 'category' 
 
    }, 
 
    "series": [ 
 
    { 
 
     "name": "East", 
 
     "type": "column", 
 
     "data": [ 
 
     { 
 
      name: 'Apple', 
 
      "y": 98.9 
 
     }, 
 
     { 
 
      name: 'Apricot', 
 
      "y": 66.71 
 
     }, 
 
     { 
 
      name: 'Cherry', 
 
      "y": 33.77 
 
     }, 
 
     { 
 
      name: 'Pear', 
 
      "y": 362.24 
 
     }, 
 
     { 
 
      name: 'Orange', 
 
      "y": 48.9 
 
     } 
 
     ], 
 
     "_colorIndex": 0 
 
    }, 
 
    { 
 
     "name": "West", 
 
     "type": "column", 
 
     "data": [ 
 
     { 
 
      name: 'Peach', 
 
      "y": 348.83 
 
     }, 
 
     { 
 
      name: 'Pear', 
 
      "y": 181.78 
 
     }, 
 
     { 
 
      name: 'Lemon', 
 
      "y": 760.83 
 
     } 
 
     ], 
 
     "_colorIndex": 1 
 
    } 
 
    ] 
 
}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/data.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

参照くださいシオマネキ:http://jsfiddle.net/vb8zz9ma/3/

+1

あなたは、各データ要素のためのx値を設定することができる(最初のものであるように残り得る)第二の一連のXインデックスを用いた例。しかし、あなたがそれをやっているのであれば、カテゴリリストを作成することもできます。ドキュメントから:http://api.highcharts.com/highcharts#xAxis.categories "...複数のシリーズがある場合、ベストプラクティスはカテゴリ配列の定義のままです。" –

+0

要するに、Highchartsのlibは異なるシリーズのカテゴリと一致せず、データをソートしません。 2番目のシリーズの 'x'インデックスを使用した例(最初のものはそのままのままです):http://jsfiddle.net/vb8zz9ma/4/ –

+0

@PawełFus私はあなたを答えとしてマークしたかったのですが、あなたはコメントをしました。もしあなたがそれに答えることができれば、私は答えとしてそれをマークすることができます。そうすれば、あなたはそれを解決する方法を見ることができます。ありがとう。 –

答えて

0

Highcharts 11bが異なるシリーズでカテゴリと一致しないと、データをソートしません。 http://jsfiddle.net/vb8zz9ma/4

例:

"series": [ 
    { 
    "name": "East", 
    "type": "column", 
    "data": [ 
     { 
     name: 'Apple', 
     "y": 98.9 
     }, 
     { 
     name: 'Apricot', 
     "y": 66.71 
     }, 
     { 
     name: 'Cherry', 
     "y": 33.77 
     }, 
     { 
     name: 'Pear', 
     "y": 362.24 
     }, 
     { 
     name: 'Orange', 
     "y": 48.9 
     } 
    ], 
    "_colorIndex": 0 
    }, 
    { 
    "name": "West", 
    "type": "column", 
    "data": [ 
     { 
     name: 'Peach', 
     "y": 348.83, 
     x: 5 
     }, 
     { 
     name: 'Pear', 
     "y": 181.78, 
     x: 3 
     }, 
     { 
     name: 'Lemon', 
     "y": 760.83, 
     x: 6 
     } 
    ], 
    "_colorIndex": 1 
    } 
] 
関連する問題