jQuery फ़्लोट चार्ट - वाई-अक्ष

Question

के लेबल (टिक) बदलें लेबल मुझे लेबल से भरे अन्य सरणी के आधार पर एक (क्षैतिज) बार चार्ट के लेबल/टिक को बदलने में सक्षम होना चाहिए। - यह एक नाम संकल्पक चीज़ का हिस्सा है।

तो मेरी initalization कोड इसलिए की तर्ज चारों ओर देखता है:

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

पुराने ग्राफ को नष्ट करने और उसके बाद एक नया बनाने के बिना बार चार्ट को अद्यतन करने का कोई तरीका है? - तो कुछ इस तरह ?:

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

संपादित करें:
तो मैं plot.getOptions().yaxis.ticks[i][1] = value के माध्यम से मूल्यों को निर्धारित कर सकते हैं, लेकिन लगता है कि यह नहीं plot.setupGrid() का उपयोग कर टिक फिर से आकर्षित कर सकते हैं ऐसा लगता है। मदद?

Answer 1

लेबल plot.getAxes().yaxis.options.ticks के माध्यम से बदल सकते हैं, फिर साजिश को फिर से खींचा जा सकता है।

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

उपर्युक्त कोड लेबल के अंत में "परीक्षण" जोड़ देगा।

Answer 2

आपके #graph कंटेनर div तत्व में आगे div तत्व हैं जिनमें लेबल होते हैं। setupGrid() विधि का उपयोग किए बिना आप इन्हें सीधे डीओएम में एक्सेस और बदल सकते हैं। लेकिन आपको उन्हें सिंक में रखने के लिए विकल्पों में मानों को भी बदलना चाहिए।

लेबल div तत्व कुछ इस तरह दिखाई:

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

को बदलने के लिए लेबल के पाठ आप निर्दिष्ट कर सकते की तरह

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

Answer 3

कुछ का उपयोग 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>