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

我需要在Jquery Flot图表中添加标签。 目前它只提供鼠标hover的标签，而不是我需要在栏后显示标签。 我附上了这个问题的图像。 在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 : "%s : $%x", defaultTheme : false, } }; // Plot the graph with the data and options provided $.plot($("#flotchart"), ds, options); 

Answer 1

正如我所说，在我给出的答案中，我发现最简单的方法就是自己动手。

 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 } 

这是您的代码的更新小提琴 。