标签：javascript jquery charts flot bar-chart

我正在为Javascript plotting (charts) library for jQuery使用jquery.flot.barnumbers.js插件,以在栏上显示数字.

我的代码：

$.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
                    }
            } ]);

我现在得到的是：

我需要的是：

因此,当没有条形数据时,零应该位于轴的正上方,并且值应该保持不变,两个都旋转90度.我该如何实现？

解决方法:

糟糕,我是did it again.

如果您想删除插件并以有趣的方式进行操作；自己编写代码.它使您可以自由自定义您喜欢的任何方式.

// 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();
}

示例here

标签：javascript,jquery,charts,flot,bar-chart
来源： https://codeday.me/bug/20191009/1882156.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。