2013-06-14 24 views
17

danych:Wykres MultiBar z nvd3/d3 pokazuje tylko etykiety dla każdego innego zaznaczenia na osi X. Jak mogę je wszystkie pokazać?

nvd3TestData = [ 
     { 
     values:[ 
      {x:"M",y:1}, 
      {x:"T",y:2}, 
      {x:"W",y:3}, 
      {x:"R",y:3}, 
      {x:"F",y:4}, 
      {x:"S",y:5}, 
      {x:"U",y:6} 
     ], 
     key:"Apples" 
     }, 
     { 
     values:[ 
      {x:"M",y:5}, 
      {x:"T",y:2}, 
      {x:"W",y:6}, 
      {x:"R",y:8}, 
      {x:"F",y:2}, 
      {x:"S",y:4}, 
      {x:"U",y:1} 
     ], 
     key:"Zebras" 
     } 
    ] 

Tworzenie wykresu (ciągniętych z angularjs dyrektywy):

nv.addGraph -> wykres = nv.models.multiBarChart() .stacked (true) .showControls (fałsz)

chart.xAxis 
    .axisLabel(attrs.xAxisLabel) 

chart.yAxis 
    .axisLabel(attrs.yAxisLabel) 
    .tickFormat(d3.format(',r')) 


console.log element 


d3.select(element[0].children[0]) 
    .datum(nvd3TestData) 
    .call(chart) 

nv.utils.windowResize(chart.update) 

wyjściowa:

Output

Oczekiwana moc musiałaby wszystkie 7 etykiety: MTWRFSU

Odpowiedz

23

Spojrzałem na nvd3.org i nie mógł znaleźć żadnej realnej dokumentacji, ale sprawdzanie źródła, znalazłem https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js który pokazał logiczną parametru wykres " reduceXTicks "z komentarzem wskazującym, że zrobiłby to, co chcesz. Wypróbowałem to na jednym z przykładowych wykresów i zadziałało. W szczególności użyłem:

chart 
    .reduceXTicks(true) 
+0

Dzięki! Nie wiem, jak to przeoczyłem, kiedy spojrzałem na źródło. –

+5

Myślę, że chodziło o '.reduceXTicks (false)' – mqklin

+0

To działa, ale w moim przypadku etykiety nakładają się na siebie nawzajem :-( – Casperonian

1

Nie ma odpowiedniej dokumentacji, ale można ją uzyskać. Wystarczy dodać poniższy wiersz do wykresu reduceXTicks false

Reszta pójdzie. Dzięki

Powiązane problemy