我需要能够根据另一个标签阵列更改(水平)条形图的标签/刻度。 - 这是名称解析器的一部分。
所以我的初始化代码看起来就是这样:
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()
重新绘制标记。帮助
答案 0 :(得分: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();
}
上面的代码会在标签的末尾添加“test”。
答案 1 :(得分:1)
您可以为yaxis指定ticks数组。
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: {
horizontal: true,
show: true,
barWidth: 0.8,
align: "center"
},
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>
答案 2 :(得分:0)
在#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]);
}