jQuery flot chart - 更改y軸的標籤（tick）

我需要能夠根據另一個包含標籤的數組更改（水平）條形圖的標籤/刻度。 - 這是名字解析器thingy的一部分。jQuery flot chart - 更改y軸的標籤（tick）

所以我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()蜱。幫幫我？

來源

2015-06-22 Melissa Zachariadis

看來，getOptions（）方法並沒有真正改變值上重繪/蜱的標籤。我敢打賭，如果你改變其他值，如最大值和最小值 - 他們會工作。 – ChiMo

標籤可以通過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(); 
}

上面的代碼會將「測試」添加到標籤的末尾。

來源

2015-06-22 05:00:25

在您的#graph容器div元素是更多div元素包含標籤。您可以直接在DOM中訪問和更改它們，而無需使用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]); 
}

來源

2015-06-22 08:13:22 Raidri

您可以指定蜱陣列y軸。

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>

來源

2017-06-16 06:17:43

jQuery flot chart - 更改y軸的標籤（tick）

回答

相關問題