2016-03-28 12 views
0

Birden çok kategoriyi birden çok seri halinde oluşturmaya çalıştığım bir sütun grafiğim var. Çünkü yüksek şutu json ile yapıyorum çünkü kategorileri veri olarak ayrı bir yere yerleştirmekten kaçınmak istiyorum. XAxis.type öğesini 'kategori' olarak ayarlarsanız, kategoriler için seri verilere bakacağını buldum. Ancak, bunu birden fazla seri ve kategori ile yaptığımda kategoriler biraz dağınık hale geliyor. Bu çalışmayı tüm kategoriler uygun şekilde gösterecek şekilde nasıl alabilirim? Armut iki kere ve Apple bile görünmez. Yüksek şemalarda, tüm kategorileri birden çok seri ve xAxis türü kümesinde kategoriye göre nasıl gösterebilirim?

$(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>

bakınız kemancı: http://jsfiddle.net/vb8zz9ma/3/

+1

için her bir veri öğesi x değeri olabilir. Ancak, bunu yapıyorsanız, kategori listesini de oluşturabilirsiniz. Dokümantasyondan: http://api.highcharts.com/highcharts#xAxis.categories "... eğer birden fazla diziniz varsa, en iyi uygulama kategoriler dizisini tanımlamaya devam ediyor." –

+0

Özetle, Highcharts lib farklı serideki kategorilere uymuyor ve verileri sıralamıyor. Ikinci diziler için 'x' indeksleri kullanarak örnek (birincisi olduğu gibi kalabilir): http://jsfiddle.net/vb8zz9ma/4/ –

+0

@ PawełFus Cevap olarak sizi işaretlemek istedim, ama bunun yerine bir yorum yaptınız. Eğer cevap verebilseydiniz, o zaman cevap olarak işaretleyebilirim, böylece otehr'ler nasıl çözüleceğini görebilirler. Teşekkürler. –

cevap

0

Highcharts lib farklı serilerde kategoriler uymuyor ve verileri sıralamak değildir. İkinci seriye ait x dizinleri kullanılarak Örnek (olduğu gibi ilk kalabilir): http://jsfiddle.net/vb8zz9ma/4

Örnek:

"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 
    } 
] 
İlgili konular