JQuery，Flot，valuelabels，center

是否可以将值标签放在条形图上，使它们在它们上方居中？

如果我设置条形align: "center" ，条形上的标签关闭而不居中。

  $(function() { var data = []; $.plot("# .chart-placeholder", data, { series: { color: "rgb(57,137,209)", bars: { show: true, // align: "center", barWidth: .8, fill: 1 }, valueLabels: { show: true, showAsHtml: true, align: "center" } }, grid: { aboveData: true, hoverable: true, borderWidth: 0 }, xaxis: { mode: "categories", tickLength: 0, labelAngle: -45, showAsHtml: true }, yaxis: { show: false, tickLength: 0 }, }); });  

海军报

Flot Value Labels插件

的jsfiddle

Answer 1

插件让你失望？ 只做自己，生活就这么简单。 这是flot的优势，紧凑的代码让你flot ……

以下是我添加这些标签的方法：

 // draw initial plot // notice no categories plugin either, why? // Because it's easier to do it yourself... var series = {data: [[0, 5.2], [1, 3], [2, 9.2], [3, 10]], lines: {show: false}, bars: {show: true, barWidth: 0.75, align:'center'}} var somePlot = $.plot("#placeholder", [ series ], { xaxis: { ticks: [[0,"One"],[1,"Two"], [2,"Three"],[3,"Four"]] } }); // 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 data = somePlot.getData()[0].data; // get your series data var xaxis = somePlot.getXAxes()[0]; // xAxis var yaxis = somePlot.getYAxes()[0]; // yAxis var offset = somePlot.getPlotOffset(); // plots offset ctx.font = "16px 'Segoe UI'"; // set a pretty label font ctx.fillStyle = "black"; for (var i = 0; i < data.length; i++){ var text = data[i][1] + ''; var metrics = ctx.measureText(text); var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2; // place it in the middle of the bar var yPos = yaxis.p2c(data[i][1]) + offset.top - 5; // place at top of bar, slightly up ctx.fillText(text, xPos, yPos); } 

小提琴演示就在这里 。

生产：

Answer 2

似乎没有使用默认值标签插件的解决方案。 但是有一些公开的问题可以讨论这个问题 ， 这里有一些你可以尝试的解决方案。

neoDD69的这个版本的插件在标注中心方面做得更好，正如你在这个小提琴中看到的那样（见下面的评论）。