我需要在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);
解决方法:
正如我所说,在给出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.