Ändern Sie die Hilfsstrichsbeschriftung der X-Achse

Question

Ich möchte, dass die Ticks, die auf der X-Achse angezeigt werden, den Wert der y-Achse haben (nur der Wert sollte geändert werden und nicht die Position). Unten ist die JsFiddle

https://jsfiddle.net/sonal215/337afs1h/1/

Anstatt 1, 2 auf der x-Achse dargestellt ist, 10 i, will 5 (jeweils y-Achse-Werte) auf dem x-Achse tick Etikett dargestellt werden.

Ich habe versucht, es zu debuggen, gibt es eine Klasse jqplot-xaxis-Tick in der Bibliothek, die den Wert ticks setzt.

<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 180px; height: 18px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 47px;">1</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 127px;">2</div></div> 

Wenn ich die Logik der Anzeige der Werte in der Bibliothek irgendwie ändern kann, dann wird es funktionieren. Oder gibt es einen anderen Weg, es zu tun.

Bitte helfen

Answer 1

Sie die jqplot-xaxis-tick divs manipulieren können, nachdem sie erstellt werden, und ihnen die y Werte aus s1 Datenfeld zuweisen.

$(document).ready(function() { 
    var s1 = [ 
    [1, 10], 
    [2, 5] 
    ]; 
    plot1 = $.jqplot('chart1', [s1], { 
    seriesColors: ["#EB2300", "#FFCC00"], 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     rendererOptions: { 
     varyBarColor: true, 
     barWidth: 30, 
     barMargin: -30 
     }, 
     pointLabels: { 
     show: true 
     } 
    }, 
    grid: { 
     drawBorder: false 
    }, 
    axes: { 
     xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer 
     }, 
     yaxis: { 
     tickOptions: { 
      show: false 
     }, 
     rendererOptions: { 
      drawBaseline: false 
     } 
     } 
    } 
    }); 
//assign x values with y values// 
$('.jqplot-xaxis-tick').each(function(i,elem) { 
     $(this).text(s1[i][1]); 
    }); 
}); 

Sehen Sie ein funktionierendes Beispiel in Ihrer Geige:

https://jsfiddle.net/337afs1h/2/