Biểu đồ flot jQuery - thay đổi nhãn (ve) của trục y

Question

Tôi cần có khả năng thay đổi nhãn/dấu của biểu đồ thanh ngang (horizontal) trên một mảng khác có nhãn. - đây là một phần của một tên giải quyết vấn đề.

Vì vậy, mã initalization tôi nhìn xung quanh các dòng như vậy:

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ó cách nào của việc cập nhật các biểu đồ thanh mà không phá hủy đồ thị cũ và sau đó tạo ra một cái mới? - vì vậy một cái gì đó như thế này ?:

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

EDIT:
Vì vậy, tôi có thể thiết lập các giá trị thông qua plot.getOptions().yaxis.ticks[i][1] = value nhưng nó có vẻ như nó không thể vẽ lại ve sử dụng plot.setupGrid(). Cứu giúp?

Answer 1

Nhãn có thể được thay đổi thông qua plot.getAxes().yaxis.options.ticks, sau đó vẽ lại ô.

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

Mã trên sẽ thêm "kiểm tra" vào cuối nhãn.

Answer 2

Trong phần tử div container #graph của bạn là các phần tử div tiếp theo có chứa nhãn. Bạn có thể truy cập và thay đổi chúng trực tiếp trong DOM mà không cần sử dụng phương thức setupGrid(). Nhưng bạn cũng nên thay đổi các giá trị trong các tùy chọn để giữ chúng trong đồng bộ.

yếu tố Nhãn div giống như thế này:

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

Để thay đổi nội dung của các nhãn sử dụng giống như

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

Answer 3

Bạn có thể xác ve mảng cho 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>