2011-09-15 15 views
8

Używam flot do wyświetlania wykresów słupkowych. Po ustawieniu wartości tickLength na 0, ukrywa ona linie pionowe i poziome, ale również ukrywa linie osi X i Y. Potrzebuję osi X i osi Y bez pionowych i poziomych linii siatki. Czy jest jakiś sposób na zrobienie tego?wyświetlanie linii osi X i osi Y bez linii siatki za pomocą flot

Proszę zobaczyć drugą tabelę na obrazku. To jest to czego chcę. enter image description here

Odpowiedz

18

Ten trudniejszy niż myślałem, że będzie. Jedyną rzeczą, jaką mogę wymyślić jest wyłączenie granicy i osi linii, niż dodać je ręcznie:

$(function() { 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    $.plot($("#placeholder"), 
     [{data: d2, 
     bars: { 
      show: true 
     }} 
     ], 
     { 
     xaxis: { 
      tickLength: 0 
     }, 
     yaxis: { 
      tickLength: 0 
     }, 
     grid: { 
      borderWidth: 0, 
      aboveData: true, 
      markings: [ { xaxis: { from: 0, to: 10 }, yaxis: { from: 0, to: 0 }, color: "#000" }, 
         { xaxis: { from: 0, to: 0 }, yaxis: { from: 0, to: 15 }, color: "#000" }] 
     } 
     } 
    ); 
}); 

Produkuje:

enter image description here

+0

Dzięki za to. Pomogło mi to z podobnym problemem - narysowanie poziomej linii zerowej osi na wykresie. – dex3703

+0

Dzięki, bardzo mi też pomogło. – Hoffmann

+1

Sprawdź moją odpowiedź, aby uzyskać lepszy sposób definiowania oznaczeń. – Hoffmann

7

jako dzieła odpowiedzi, ale to trochę zbyt na stałe zapisał swoje dane. Ten jest nieco lepszy:

$(function() { 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    $.plot($("#placeholder"), 
     [{data: d2, 
     bars: { 
      show: true 
     }} 
     ], 
     { 
     xaxis: { 
      tickLength: 0 
     }, 
     yaxis: { 
      tickLength: 0 
     }, 
     grid: { 
      borderWidth: 0, 
      aboveData: true, 
      markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" }, 
         { xaxis: { from: 0, to: 0 }, color: "#000" }] 
     } 
     } 
    ); 
}); 

Nadal, jeśli wykres zaczyna się od wartości innej niż 0, należy ręcznie zmienić oznaczenia.

2

Dla przypadku (0,0) pochodzenia, można fałszywe osie po prostu rysunek dolny i lewy linie graniczne:

grid: { 
    borderColor: 'black', 
    borderWidth: { 
     top: 0, 
     right: 0, 
     bottom: 2, 
     left: 2 
    }, 
    ... 
} 
4

Ustawianie

OśX: {tickLength: 0 }, yaxis: {tickLength: 0}

spowoduje również ukrycie linii siatki.

+0

wygląda na to, że to prosta odpowiedź, która zadziałała dla mnie, dzięki =) –

0

Spróbuj kolor linii w kolorze białym (lub BG-kolor)

yaxis: 
    . . . 
    tickColor: "#cccccc" /* or better "#ffffff" */ 
    . . . 
Powiązane problemy