Я использую флот для создания гистограмм. Вот мой код bar graph codeКак удалить галочки оси y на флоте
- мне нужно сделать ось у клеща исчезнуть.
- мне нужно поставить какой-то ярлык на верхней части каждого бара
Как это сделать?
Я использую флот для создания гистограмм. Вот мой код bar graph codeКак удалить галочки оси y на флоте
Как это сделать?
Ладно, после многократного сбрасывания с помощью флота и загрузки источника, я, наконец, нашел для себя хорошую отправную точку.
Демо-версия jsFiddle - here.
Внутренности кода с помощью крючка для который черпает этикетку:
function drawSeriesHook(plot, canvascontext, series) {
var ctx = canvascontext,
plotOffset = plot.offset(),
labelText = 'TEST', // customise this text, maybe to series.label
points = series.datapoints.points,
ps = series.datapoints.pointsize,
xaxis = series.xaxis,
yaxis = series.yaxis,
textWidth, textHeight, textX, textY;
// only draw label for top yellow series
if (series.label === 'baz') {
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
ctx.lineWidth = series.bars.lineWidth;
ctx.fillStyle = '#000'; // customise the colour here
for (var i = 0; i < points.length; i += ps) {
if (points[i] == null) continue;
textWidth = ctx.measureText(labelText).width; // measure how wide the label will be
textHeight = parseInt(ctx.font); // extract the font size from the context.font string
textX = xaxis.p2c(points[i] + series.bars.barWidth/2) - textWidth/2;
textY = yaxis.p2c(points[i + 1]) - textHeight/2;
ctx.fillText(labelText, textX, textY); // draw the label
}
ctx.restore();
}
}
Смотрите комментарии для того, где вы можете настроить ярлык.
Чтобы удалить галочки по оси Y, это простая настройка параметров. Кроме того, вы можете выработать максимальное значение y для каждого из стеков баров, а затем добавить около 100 к этому, чтобы установить максимальное значение Y, которое позволит пространство, занимаемое метками. Код для всего этого тогда будет следующим:
// determine the max y value from the given data and add a bit to allow for the text
var maxYValue = 0;
var sums = [];
$.each(data,function(i,e) {
$.each(this.data, function(i,e) {
if (!sums[i]) {
sums[i]=0;
}
sums[i] += this[1]; // y-value
});
});
$.each(sums, function() {
maxYValue = Math.max(maxYValue, this);
});
maxYValue += 100; // to allow for the text
var plot = $.plot($("#placeholder"), data, {
series: {
stack: 1,
bars: {
show: true,
barWidth: 0.6,
},
yaxis: {
min: 0,
tickLength: 0
}
},
yaxis: {
max: maxYValue, // set a manual maximum to allow for labels
ticks: 0 // this line removes the y ticks
},
hooks: {
drawSeries: [drawSeriesHook]
}
});
Это должно заставить вас начать. Я уверен, вы можете взять его здесь.
Привет, Грег, спасибо за текст над баром, но в демонстрации после удаления оси y первая полоса идет на самое верхнее ... поэтому мой текст там не виден ... Есть ли какое-то решение для этого? –
@Coder_sLaY Смотрите мое редактирование, я даже отработал это для вас. Была обновлена ссылка jsFiddle. – GregL
Люблю тебя, greg. Ты лучший :) –