JQuery,Flot,valuelabels,center

前端之家收集整理的这篇文章主要介绍了JQuery,Flot,valuelabels,center前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有可能将价值标签放在酒吧上,以便他们站在他们的身边?

如果我设置酒吧对齐:“center”,酒吧上的标签关闭的,不居中.

  1. <script type="text/javascript">
  2.  
  3. $(function() {
  4.  
  5. var data = [<?PHP echo $data; ?>];
  6.  
  7. $.plot("#<?PHP echo $target; ?> .chart-placeholder",data,{
  8. series: {
  9. color: "rgb(57,137,209)",bars: {
  10. show: true,// align: "center",barWidth: .8,fill: 1
  11. },valueLabels: {
  12. show: true,showAsHtml: true,align: "center"
  13. }
  14. },grid: {
  15. aboveData: true,hoverable: true,borderWidth: 0
  16. },xaxis: {
  17. mode: "categories",tickLength: 0,labelAngle: -45,showAsHtml: true
  18. },yaxis: {
  19. show: false,tickLength: 0
  20. },});
  21. });
  22.  
  23. </script>

Flot

Flot Value Labels plugin

JSFIDDLE

解决方法

插件让你失望了只要自己做,生活就这么简单了.这是flot的优势,紧凑的代码,让你的方式…

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

  1. // draw initial plot
  2. // notice no categories plugin either,why?
  3. // Because it's easier to do it yourself...
  4. var series = {data: [[0,5.2],[1,3],[2,9.2],[3,10]],lines: {show: false},bars: {show: true,barWidth: 0.75,align:'center'}}
  5. var somePlot = $.plot("#placeholder",[ series ],{
  6. xaxis: {
  7. ticks: [[0,"One"],"Two"],"Three"],"Four"]]
  8. }
  9. });
  10.  
  11. // after initial plot draw,then loop the data,add the labels
  12. // I'm drawing these directly on the canvas,NO HTML DIVS!
  13. // code is un-necessarily verbose for demonstration purposes
  14. var ctx = somePlot.getCanvas().getContext("2d"); // get the context
  15. var data = somePlot.getData()[0].data; // get your series data
  16. var xaxis = somePlot.getXAxes()[0]; // xAxis
  17. var yaxis = somePlot.getYAxes()[0]; // yAxis
  18. var offset = somePlot.getPlotOffset(); // plots offset
  19. ctx.font = "16px 'Segoe UI'"; // set a pretty label font
  20. ctx.fillStyle = "black";
  21. for (var i = 0; i < data.length; i++){
  22. var text = data[i][1] + '';
  23. var metrics = ctx.measureText(text);
  24. var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2; // place it in the middle of the bar
  25. var yPos = yaxis.p2c(data[i][1]) + offset.top - 5; // place at top of bar,slightly up
  26. ctx.fillText(text,xPos,yPos);
  27. }

小提琴演示是here.

生产:

猜你在找的jQuery相关文章