我有一个jqplot条形图,其中包含3个条形图值。我试图使具有最高值的条在图表中一直向上伸展(比如将此值设置为图表的顶部),然后重新计算其他两个条的高度。这是我使用的代码:
var value1 = 119, value2 = 91, value3 = 12;
var s1 = [value1, value2, value3];
var ticks = ['a', 'b', 'c'];
plot7 = $.jqplot('chart7', [s1], {
seriesColors:['#74b6e7', '#003246', '#e22a20'],
gridPadding: {top:0, bottom:0, left:0, right:0},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadow: false,
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 51,
groups: 1,
varyBarColor: true
},
//pointLabels: { show: false }
},
series:[
{pointLabels:{
show: true,
labels:[ value1.toString(), value2.toString(), value3.toString()]
}}],
axes: {
// yaxis: { autoscale: true },
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
min: 0,
max: value1
}
}
});
CSS代码:
.jqplot-grid-canvas, .jqplot-xaxis, .jqplot-yaxis{ display: none;}
.jqplot-point-label{ top: 129px!important; color: #fff;}
#chart7{ width: 152px; height: 152px;}
,图表如下所示:
我似乎无法找出为什么第一个点标签没有显示在图表的第一个栏上。 我做错了什么?
答案 0 :(得分:1)
这可以解决您的问题:
var value1 = 119, value2 = 91, value3 = 12;
var s1 = [value1, value2, value3];
var ticks = ['a', 'b', 'c'];
plot7 = $.jqplot('chart7', [s1], {
seriesColors:['#74b6e7', '#003246', '#e22a20'],
gridPadding: {top:0, bottom:0, left:0, right:0},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadow: false,
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 51,
groups: 1,
varyBarColor: true
},
//pointLabels: { show: false }
},
series:[
{pointLabels:{
show: true,
labels:[ value1.toString(), value2.toString(), value3.toString()],
location:'s',
ypadding : 5,
edgeTolerance : -1
}}],
axes: {
// yaxis: { autoscale: true },
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
min: 0,
max: value1
}
}
});
//modify the label positions
var height = $(".jqplot-series-canvas").attr("height");
$(".jqplot-point-label").css("top",height - 10);