javascript - 水平条形图上的 Flot 数据标签

Question

Too much code to paste here so....

请参阅 JS Fiddle http://jsfiddle.net/1a2s35m2/当前代码。

我正在尝试使用 flot 创建水平条形图。正如您将从 Fiddle 中看到的那样，这工作正常，但我想在条形本身内显示条形的值，而不是在 Y 轴中显示为标签，如下图所示...

我曾尝试使用“labels”插件和 barnumbers 插件，但它们似乎不起作用。 (Barnumbers 接近但显示 0 1 2 3 作为值。

有什么想法吗？

Answer 1

我真的开始听起来像一个 broken record在这里，但是当你的图表变得非常复杂时，忘记插件并自己做。

下面是我上面的链接中的修改代码，可满足您绘制绘图的方式:

    // after initial plot draw, then loop the data, add the labels
    // I'm drawing these directly on the canvas, NO HTML DIVS!
    // code is un-necessarily verbose for demonstration purposes
    var ctx = somePlot.getCanvas().getContext("2d"); // get the context
    var allSeries = somePlot.getData();  // get your series data
    var xaxis = somePlot.getXAxes()[0]; // xAxis
    var yaxis = somePlot.getYAxes()[0]; // yAxis
    var offset = somePlot.getPlotOffset(); // plots offset
    ctx.font = "12px 'Segoe UI'"; // set a pretty label font
    ctx.fillStyle = "black";
    for (var i = 0; i < allSeries.length; i++){
        var series = allSeries[i];        
        var dataPoint = series.datapoints.points; // one point per series
        var x = dataPoint[0];
        var y = dataPoint[1];  
        var text = x + '%';
        var metrics = ctx.measureText(text);        
        var xPos = xaxis.p2c(x)+offset.left - metrics.width; // place at end of bar
        var yPos = yaxis.p2c(y) + offset.top - 2;
        ctx.fillText(text, xPos, yPos);
    }

已更新 fiddle .