Как убрать галочки по оси Y в flot - PullRequest
Новая
       27

Как убрать галочки по оси Y в flot

0 голосов
/ 21 февраля 2012

Я использую flot для создания гистограмм.Вот мой код код гистограммы

  1. Мне нужно сделать так, чтобы тика оси Y исчезла.
  2. Мне нужно наложить ярлык на верхней части каждогобар

Как это сделать?

1 Ответ

4 голосов
/ 21 февраля 2012

Ладно, после долгих прогулок с Flot и загрузки исходного кода, я наконец-то нашел для вас хорошую отправную точку.

Демонстрация jsFiddle: здесь .

В кишечнике кода используется хук для drawSeries, который рисует метку: 

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]
    }
});

Это должно начать вас.Вы можете взять это отсюда, я уверен.

...