2014-02-26 13 views
6

Ich habe ein Liniendiagramm mit Sucher gemacht.nvd3 Liniendiagramm, wie man Gitterlinien und Yaxis entfernt

Hier ist mein Anfangscode

 var chart = nv.models.lineWithFocusChart(); 

// chart.transitionDuration(500); 
    chart.xAxis 
     .tickFormat(d3.format(',g')); 
    chart.xAxis 
     .axisLabel("Date"); 
    chart.xAxis.tickPadding(0); 


    chart.x2Axis 
     .tickFormat(d3.format(',g')); 




    chart.yAxis 
     .tickFormat(d3.format(',.2g')); 
    chart.y2Axis 
     .tickFormat(d3.format(',.2h')); 
// chart.showYAxis(false); 

ich die y-Achse Etiketten entfernen möge (das heißt ich will keine Nummer auf der y-Achse zeigt).

Ich möchte auch alle Gitternetzlinien entfernen.

Gibt es sowas wie chart.yAxis.etwaswashier?

Dank

Antwort

8

.showYAxis(false) sollte die y-Achse entfernen. Wenn das nicht funktioniert, können Sie .nv-y text{display: none;} als Stil anwenden.

Verwenden Sie den Stil .tick line {display: none;}, um Rasterlinien loszuwerden und die x-Achse beizubehalten.

Lassen Sie sich mit .tick{display: none;}

aller Achsen und Linien los :)

+0

Wenn Sie die y-Achsenbeschriftung beibehalten, aber nicht die Werte anzeigen möchten: '.nv-axisMaxMin { \t Anzeige: keine; } ' – raven

3

Um die Rasterlinien zu entfernen:

.showYAxis(false) 
.showXAxis(false) 
8
:

.nv-axis .tick line { 
     display:none; 
    } 

Und Achsen können mehr ohne weiteres durchgeführt werden

Um Zecke auf der y-Achse

.nv-axis.nv-y .tick line { 
     display:none; 
    } 

tick Zum Entfernen der X-Achse

.nv-axis.nv-x .tick line { 
     display:none; 
    } 

Rem zu entfernen Ove Etikett auf der X-Achse

.showXAxis(false) 

Um Etikett auf der Y-Achse zu entfernen

.showYAxis(false) 

alle Gitterlinien entfernen

.nv-axis .tick line { 
     display:none; 
    } 
+0

@ user3171919 Ich denke, Sie sollten es als eine richtige Antwort markieren. –

1

Gitterlinie auszublenden, fügen Sie einfach diese zu Ihrem CSS

.tick line { 
display: none; 
} 

und für die X-Achse nur hinzufügen .showYAxis(false)

wenn Sie nur die yAchse Zeile löschen möchten und behalten Sie die Ticks, die Sie es mit dem CSS tun können:

.nvd3 .nv-axis.nv-y path.domain{ 
stroke-opacity: 0; 
} 

siehe zum Beispiel plunker.

Verwandte Themen