У меня есть гистограмма 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;}
и график выглядит следующим образом:
Кажется, я не могу понять, почему первая метка точки не отображается на первой строке графика. Что я делаю не так?
это исправит вашу проблему:
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);