2013-06-14 8 views
17

डाटा:एनवीडी 3/डी 3 के साथ मल्टीबार चार्ट केवल एक्स-अक्ष पर हर दूसरे टिक के लिए लेबल दिखाता है। मैं उन्हें दिखाने के लिए कैसे प्राप्त कर सकता हूं?

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

चार्ट (एक AngularJS निर्देश से खींचा) बनाना:

nv.addGraph -> चार्ट = nv.models.multiBarChart() .stacked (सही) .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 पर देखा और किसी भी असली प्रलेखन नहीं मिल सकता है, लेकिन स्रोत की जाँच, मैं https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js जिनमें से एक बूलियन चार्ट पैरामीटर से पता चला पाया " lowxticks "एक टिप्पणी के साथ यह इंगित करता है कि यह वही करेगा जो आप चाहते हैं। मैंने उदाहरण चार्ट में से एक के साथ इसे आजमाया और यह काम किया। विशेष रूप से, मैंने उपयोग किया:

chart 
    .reduceXTicks(true) 
+0

धन्यवाद! यह सुनिश्चित नहीं है कि जब मैंने स्रोत को देखा तो मुझे कैसे याद आया। –

+5

मुझे लगता है कि आपका मतलब '.reduceXTicks (false)' – mqklin

+0

यह काम करता है, लेकिन मेरे मामले के लिए, लेबल एक-दूसरे को ओवरलैप कर रहे हैं :-( – Casperonian

1

कोई उचित दस्तावेज़ीकरण नहीं है, लेकिन आप इसे प्राप्त कर सकते हैं। बस reduceXTicks अपने चार्ट में नीचे पंक्ति जोड़ें: झूठी

बाकी का पालन करेंगे। धन्यवाद

संबंधित मुद्दे

 संबंधित मुद्दे