jQuery flot chart - Ändern der Beschriftungen (Ticks) der Y-Achse

Question

Ich muss in der Lage sein, die Beschriftungen/Ticks eines (horizontalen) Balkendiagramms basierend auf einem anderen Array voller Beschriftungen zu ändern. - Das ist Teil eines Namensauflösungs-Dings.

So sieht mein Code initialisiert um die Zeilen so:

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 
}); 

Gibt es eine Möglichkeit das Balkendiagramm der Aktualisierung ohne alte Graph zu zerstören und dann einen neuen zu erstellen? - so etwas wie dies ?:

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

EDIT:
So kann ich die Werte durch plot.getOptions().yaxis.ticks[i][1] = value gesetzt, aber es scheint, wie es die Zecken mit plot.setupGrid() nicht neu zu zeichnen. Hilfe?

Answer 1

Die Etiketten können durch plot.getAxes().yaxis.options.ticks geändert werden, dann das Diagramm neu zeichnen.

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(); 
} 

Der obige Code wird "Test" am Ende des Etiketts hinzufügen.

Answer 2

In Ihrem #graph Container-Div-Element befinden sich weitere div-Elemente, die die Labels enthalten. Sie können diese direkt im DOM aufrufen und ändern, ohne die Methode setupGrid() zu verwenden. Sie sollten jedoch auch die Werte in den Optionen ändern, um sie synchron zu halten.

Das Label div Elemente in etwa so aussehen:

<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> 

der Text der Etiketten verwenden etwas zu ändern wie

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

Answer 3

können Sie festlegen, Zecken-Array für yaxis.

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>