2013-06-14 10 views
17

dati:Il grafico MultiBar con nvd3/d3 mostra solo le etichette per ogni altro segno di spunta sull'asse x. Come posso farli mostrare tutti?

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" 
     } 
    ] 

Creazione del grafico (tirato da una direttiva angularjs):

nv.addGraph -> grafico = nv.models.multiBarChart() .stacked (veri) .showControls (false)

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) 

uscita:

Output

uscita prevista avrebbe tutte le 7 etichette: MTWRFSU

risposta

23

ho guardato su nvd3.org e non poteva trovare alcuna documentazione reale, ma controllando la fonte, ho trovato https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js che ha mostrato un parametro grafico booleano di " reduceXTicks "con un commento che indica che farebbe ciò che vuoi. Ho provato con uno dei grafici di esempio e ha funzionato. Nello specifico, ho utilizzato:

chart 
    .reduceXTicks(true) 
+0

Grazie! Non sono sicuro di come mi sono perso quando ho guardato oltre la fonte. –

+5

Penso che intendessi '.reduceXTicks (false)' – mqklin

+0

Questo funziona, ma nel mio caso le etichette si sovrappongono tra loro :-( – Casperonian

1

Non esiste una documentazione adeguata, ma è possibile ottenerlo. Basta aggiungere la riga sotto al grafico reduceXTicks: falsi

resto seguirà. Grazie

Problemi correlati