如何在Jquery Flot Chart中添加标签？

Question

我需要在Jquery Flot图表中添加标签。目前它只提供鼠标悬停的标签，而不是我需要在栏后显示标签。我附上了一个图像和这个问题。在hash（＃）的位置我需要在那里放置条形标签。请给我一个解决方案。 在此先感谢。

 for (i = 0; i < bardata.length; i++)  {

            ds.push({
                label: yearArry[i],
                data : bardata[i],
            });

    }
var options = {
        colors : colorArray,
        grid : {
            hoverable : true,
            clickable : true,
            tickColor : $chrt_border_color,
            borderWidth : $chrt_border_width,
            borderColor : $chrt_border_color,
        },
        series: {
            stack:true,
            bars: {
                show : true,
                barWidth : 0.8,
                horizontal: true,
                align: "center"
            }
        },
        xaxis: {
            tickFormatter: function(val, axis) { return val < axis.max ? abbreviateNumber(val) : "Cost"; }
        },
        yaxis: {
            ticks: company_label
        },
        legend: {
            show: showLegend,
            position: "ne",
            noColumns : 1,
            backgroundOpacity: 0.5,
            margin: [0, -70]
        },
        tooltip : true,
        tooltipOpts : {
            content : "<b>%s</b> : <span>$%x</span>",
            defaultTheme : false,
        }
    };

    // Plot the graph with the data and options provided
    $.plot($("#flotchart"), ds, options);

Answer 1

正如我所说，在我给出here的答案中，我觉得最简单的方法就是自己做。

var somePlot = $.plot($("#flotchart"), ds, options);

var ctx = somePlot.getCanvas().getContext("2d");  //canvas context
var series = somePlot.getData();
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "16px 'Segoe UI'";
ctx.fillStyle = "black";
for (var i = 0; i < series.length; i++){
    var text = '$' + series[i].data[0][0]; // x data point
    var metrics = ctx.measureText(text);
    var xPos = (xaxis.p2c(series[i].data[0][0])+offset.left);
    var yPos = yaxis.p2c(series[i].data[0][2]) + offset.top + 5; // get positions
    ctx.fillText(text, xPos, yPos); // add the label
} 

以下是您的代码updated fiddle。