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）

回答

相关问题