jQuery flot bar numbers：数字定位 [英] jQuery flot bar numbers: Numbers positioning

问题描述

我使用 it < a> 。

如果你想删除插件，这样做有趣的方式;自己编写代码。

  //绘制绘图后
 var ctx = somePlot.getCanvas（）。getContext（2d）; 
 var data = somePlot.getData（）[0] .data; 
 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  var text = data [i] [4] +' 
 var metrics = ctx.measureText（text）; 
 var xPos = xaxis.p2c（data [i] [0]）+ offset.left; 
 var yPos = yaxis.p2c（data [i] [5]）+ offset.top + metrics.width + 5; 
 //执行旋转
 ctx.save（）; 
 ctx.translate（xPos，yPos）; 
 ctx.rotate（-Math.PI / 2）; 
 ctx.fillText（text，1，1）; 
 ctx.restore（）; 
} 
  

示例此处。

I'm using jquery.flot.barnumbers.js plugin for the Javascript plotting (charts) library for jQuery to show the numbers on the bars.

My code:

$.plot("#placeholderByDay", [
            {
                data: DataOne, label: "Total Calls", bars: {
                    numbers:{
                        show:true,
                        xAlign: 80,//align top
                        yAlign: 1 
                        //yAlign: function(y) { return y+ 1; } //upside of bars
                    }
            } ]);

What I get now is:

What I need is:

So when there is no data for a bar, the zeros should be just above the axis, and where there are values should be as is, both rotated let 90 degrees. How can I achieve this?

解决方案

Oops, I did it again.

If you'd like to drop the plugin and do this the fun way; code it up yourself. It'll give you the freedom to customize any way you like.

// after you draw the plot
var ctx = somePlot.getCanvas().getContext("2d");
var data = somePlot.getData()[0].data;
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 < data.length; i++){       
    var text = data[i][4] + '';
    var metrics = ctx.measureText(text);
    var xPos = xaxis.p2c(data[i][0]) + offset.left;
    var yPos = yaxis.p2c(data[i][5]) + offset.top + metrics.width + 5;
    // perform the rotation
    ctx.save();
    ctx.translate(xPos, yPos);
    ctx.rotate(-Math.PI/2);
    ctx.fillText(text, 1, 1);
    ctx.restore();
}

Example here.

这篇关于jQuery flot bar numbers：数字定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！