更改 x 轴的刻度标签
Change the tick label of x axis
我希望 x 轴上显示的刻度具有 y 轴的值(只应更改值,而不是位置)。下面是 JsFiddle
https://jsfiddle.net/sonal215/337afs1h/1/
我不想在 x 轴上显示 1、2,而是在 x 轴刻度标签上显示 10、5(各自的 yaxis 值)。
我试过调试它,库中有一个 class jqplot-xaxis-tick 可以设置刻度值。
<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 180px; height: 18px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 47px;">1</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 127px;">2</div></div>
如果我能以任何方式更改在库中显示值的逻辑,那么它将起作用。
或者有没有其他方法可以做到。
请帮忙
您可以在创建 jqplot-xaxis-tick
div 后对其进行操作,并从您的 s1
数据数组中为它们分配 y
值。
$(document).ready(function() {
var s1 = [
[1, 10],
[2, 5]
];
plot1 = $.jqplot('chart1', [s1], {
seriesColors: ["#EB2300", "#FFCC00"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
barWidth: 30,
barMargin: -30
},
pointLabels: {
show: true
}
},
grid: {
drawBorder: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
tickOptions: {
show: false
},
rendererOptions: {
drawBaseline: false
}
}
}
});
//assign x values with y values//
$('.jqplot-xaxis-tick').each(function(i,elem) {
$(this).text(s1[i][1]);
});
});
查看您的工作示例 fiddle:
我希望 x 轴上显示的刻度具有 y 轴的值(只应更改值,而不是位置)。下面是 JsFiddle
https://jsfiddle.net/sonal215/337afs1h/1/
我不想在 x 轴上显示 1、2,而是在 x 轴刻度标签上显示 10、5(各自的 yaxis 值)。
我试过调试它,库中有一个 class jqplot-xaxis-tick 可以设置刻度值。
<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 180px; height: 18px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 47px;">1</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 127px;">2</div></div>
如果我能以任何方式更改在库中显示值的逻辑,那么它将起作用。 或者有没有其他方法可以做到。
请帮忙
您可以在创建 jqplot-xaxis-tick
div 后对其进行操作,并从您的 s1
数据数组中为它们分配 y
值。
$(document).ready(function() {
var s1 = [
[1, 10],
[2, 5]
];
plot1 = $.jqplot('chart1', [s1], {
seriesColors: ["#EB2300", "#FFCC00"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
barWidth: 30,
barMargin: -30
},
pointLabels: {
show: true
}
},
grid: {
drawBorder: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
tickOptions: {
show: false
},
rendererOptions: {
drawBaseline: false
}
}
}
});
//assign x values with y values//
$('.jqplot-xaxis-tick').each(function(i,elem) {
$(this).text(s1[i][1]);
});
});
查看您的工作示例 fiddle: