jQuery flot chart - modifica etichette (zecche) dell'asse y

Question

Devo essere in grado di modificare le etichette/zecche di un grafico a barre (orizzontale) basato su un altro array pieno di etichette. - Fa parte di un nome risolutivo.

Quindi il mio codice di inizializzazione del guarda intorno alle linee di così:

var ticks = [["abc", 0], ["def", 1], ["ghi", 2], ["jkl", 3]]; 

//loop for each value goes here 
var data = { 
    data: [[0, 111]], //[1, 222], [2, 333], [3, 444]... etc 
    bars: { 
     horizontal: true, 
     show: true, 
     barWidth: 0.8, 
     align: "center" 
    } 
}; 

var plot = $.plot($("#graph"), data, { 
    yaxis: { 
     ticks: ticks 
    } 
    //etc 
}); 

C'è un modo di aggiornare il grafico a barre senza distruggere vecchio grafico e quindi la creazione di uno nuovo? - quindi qualcosa di simile ?:

//New ticks for y-axis 
plot.yaxisticks = [["ABC", 0], ["DEF", 1], ["GHI", 2], ["JKL", 3]]; 
plot.draw(); 

EDIT:
modo da poter impostare i valori attraverso plot.getOptions().yaxis.ticks[i][1] = value ma sembra che non si può ri-disegnare le zecche utilizzando plot.setupGrid(). Aiuto?

Answer 1

Le etichette possono essere modificate tramite plot.getAxes().yaxis.options.ticks, quindi ridisegnando il grafico.

function test() { 
    var ticks = plot.getAxes().yaxis.options.ticks; 

    for (var i = 0; i < ticks.length; i++){ 
     ticks[i][1] += " test"; 
    } 

    plot.setupGrid(); 
    plot.draw(); 
} 

Il codice sopra riportato aggiunge "test" alla fine dell'etichetta.

Answer 2

Nell'elemento div contenitore sono #graph ulteriori elementi div che contengono le etichette. È possibile accedere e modificarli direttamente nel DOM senza utilizzare il metodo setupGrid(). Ma dovresti anche cambiare i valori nelle opzioni per tenerli sincronizzati.

L'etichetta div elementi sembrano qualcosa di simile:

<div class="tickLabels" style="font-size:smaller"> 
    <div class="xAxis x1Axis" style="color:#545454"> 
     <div class="tickLabel" style="position:absolute;text-align:center;left:-44px;top:761px;width:138px">1</div> 
     <div class="tickLabel" style="position:absolute;text-align:center;left:841px;top:761px;width:138px">2</div> 
     <div class="tickLabel" style="position:absolute;text-align:center;left:1726px;top:761px;width:138px">3</div> 
    </div> 
    <div class="yAxis y1Axis" style="color:#545454"> 
     <div class="tickLabel" style="position:absolute;text-align:right;top:749px;right:1781px;width:18px">0</div> 
     <div class="tickLabel" style="position:absolute;text-align:right;top:393px;right:1781px;width:18px">10</div> 
     <div class="tickLabel" style="position:absolute;text-align:right;top:37px;right:1781px;width:18px">20</div> 
    </div> 
</div> 

Per modificare il testo delle etichette usare qualcosa come

for (var i = 0; i < ticks.length; i++) { 
    $('#graph div.y1axis div.tickLabel').eq(i).text(ticks[i]); 
} 

Answer 3

È possibile specificare le zecche array per asseY.

https://github.com/flot/flot/blob/master/API.md#customizing-the-axes

$(function() { 
 
    
 
    var ticks = [[0, "abc"], [1, "def"], [2, "ghi"], [3, "jkl"], [4, "four"]]; 
 
    var data = [[111, 1], [222, 2], [333, 3], [444, 4]]; 
 
    
 
    var plot1 = $.plot($("#graph"), [{ data: data, label: "Series A"}], { 
 
    series: { 
 
     legend : { 
 
      show: true 
 
     }, 
 
     bars: { 
 
     \t horizontal: true, 
 
     \t show: true, 
 
     \t barWidth: 0.8, 
 
     \t align: "center" 
 
    \t \t }, 
 
     points : { 
 
      show : true 
 
     } 
 
    }, 
 
    yaxis : { 
 
     ticks: ticks 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script> 
 

 
<div class="chart" id="graph" style="width:400px;height:300px;"></div>