Как получить метки оси X в flot? - PullRequest
Новая
       38

Как получить метки оси X в flot?

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

Я использую Flot для создания графиков.Это мой код здесь jsFiddle code 

function drawSeriesHook(plot, canvascontext, series) {
var ctx = canvascontext,
    plotOffset = plot.offset(),
    labelText = 'VALUE', // 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.color === '#F8C095') {
    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();
}
}
  1. В функции My drawseriesHook мне нужно получить метки оси x, такие как Data1, Data2, Data3, Data4
  2. Есть ли способ однозначно идентифицировать последний элемент данных без использования series.label & series.color. В настоящее время я идентифицировал его, изменив series.color в функции

1 Ответ

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

1.) Хорошо, я думаю, вы хотите установить labelText для каждого бара. Добавьте следующую строку в цикл for: 

labelText = series.xaxis.ticks[i / ps].label;

Также см. Обновленный пример .

2.) Вы можете добавить собственные значения к data, например, чтобы отметить последний: 

var data = [
    {
        label : 'Used',
        color : '#EF7816',
        data : [ [ 1, 85], [ 2, 50 ], [ 3, 18], [ 4, 8 ] ],
        last : false
    },
    ...
    {
        color : '#F8C095',
        data : [ [ 1, 12], [ 2, 10], [ 3, 3], [ 4, 2] ],
        last : true
    }
];

В вашем крючке вы можете проверить флаг: 

if (series.last) { ...

Также см. Следующий обновленный пример .

...