jQuery flot图表-更改y轴的标签(刻度)
jQuery flot chart - change labels (ticks) of y-axis
我需要能够根据另一个充满标签的数组更改(水平)条形图的标签/刻度。-这是名称解析程序的一部分。
因此,我的初始化代码围绕着So的行进行查找:
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
});
<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>
有没有办法在不破坏旧图然后创建新图的情况下更新条形图?-那么是这样的吗?:
//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()
重新绘制刻度。帮助
您可以为yaxis指定ticks数组。
https://github.com/flot/flot/blob/master/API.md#customizing-轴
$(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>
可以通过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"。
在#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]);
}
相关文章:
- d3.js散点图中的刻度标签在Firefox 13.0.1中被截断
- Highcharts在刻度上设置X轴标签
- jqPlot使用canvastickrenderer手动定义的刻度标签
- 为 d3 提供与刻度名称不同的序号轴标签
- 如何在 D3.js 中制作轴刻度标签超链接
- 需要帮助从数组制作折线图,我想要自定义刻度标签
- 动态更改高图中x轴刻度标签的日期时间格式
- 在 D3.js 中,是否可以将刻度标签的查找函数传递给序数刻度
- 在折线图上隐藏 D3 中的刻度标签
- 我将如何将 x 轴标签与它们在 HTML 中对应的刻度线对齐
- jQueryflot-适合可变范围图表的时间轴刻度标签,没有文本溢出
- Dygraph:x轴上没有刻度和刻度标签
- d3.js中轴刻度标签的样式
- NVD3:在图形的顶部有特定刻度值的标签
- 对于线性刻度刻度的文本标签,缩放会导致标签扩展到轴之外
- D3 -具有相同名称的有序刻度标签
- 如何使用日期对象作为直线轴的刻度标签
- 如何添加轴刻度/标签在谷歌列图
- Flot:显示特定的刻度标签
- jQuery flot图表-更改y轴的标签(刻度)