2013-06-14 7 views
17

データ:(angularjs指令から引き出さ)チャートを作成nvd3/d3を使用したマルチバーチャートでは、x軸の他のすべてのティックのラベルのみが表示されます。どうすればそれらをすべて表示させることができますか?

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

nv.addGraph - > チャート= .stacked nv.models.multiBarChart() (真) .showControls (偽)

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) 

出力:

Output

の予想される出力は、すべての7つのラベルだろう : MTWRFSU

答えて

23

を私はnvd3.orgに見て、任意の実際のドキュメントを見つけることができませんでしたが、ソースをチェックし、私は "のブールチャートのパラメータを示した0​​を見つけましたあなたが望むことをすることを示すコメントを「reducedXTicks」に追加してください。私はサンプルチャートの1つで試してみました。具体的には、私は使用しました:

chart 
    .reduceXTicks(true) 
+0

ありがとう!私がソースを見渡したとき、どうやってそれを逃したのか分かりません。 –

+5

あなたは '.reduceXTicks(false)'を意味すると思います – mqklin

+0

これはうまくいきますが、私の場合、ラベルはお互いに重なっています:-( – Casperonian

1

適切なドキュメントはありませんが、それを達成することができます。 はちょうどあなたのチャートに reduceXTicksを以下の行を追加します:偽

休憩が続きます。 ありがとう

関連する問題