2012-02-23 5 views
4

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

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. In My функции drawseriesHook мне нужно, чтобы получить х метки осей как Data1, data2, Data3, Data4
  2. Есть ли способ, чтобы однозначно идентифицировать последний элемент данных без использования series.label & series.color.Currently я определил его модификацию series.color в функции

ответ

4

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

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

Также смотрите updated example.

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) { ... 

Также см следующий updated example.

+0

В этих ярлыках у var будут все метки тиков. Как индивидуально получить ярлык из него? –

+0

@Coder_sLaY: вам не нужны все, вы хотите только текущую метку? – scessor

+0

да точно, но когда я ставил предупреждение (метки), тогда я получаю все 4. Мне нужно только первое. –

Смежные вопросы