javascript-水平条形图上的Flot数据标签

2019-10-09 11:39:25 阅读：176 来源： 互联网

Too much code to paste here so....

有关当前代码,请参见http://jsfiddle.net/1a2s35m2/的JS Fiddle.

我正在尝试使用flot创建水平条形图.正如您从小提琴中看到的那样,这很好用,但我想在条形图本身中显示条形图的值,而不是在Y轴上显示为标签,如下图所示…

我尝试使用“标签”插件和barnumbers插件,但这些似乎不起作用. (条码编号接近,但显示0 1 2 3作为值.

有任何想法吗？

解决方法:

我的确开始听起来像是broken record,但是随着您的图表变得非常复杂,请忘记插件并自己做.

以下是我上面链接中的修改后的代码,可满足您绘制绘图的需要：

    // 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 allSeries = somePlot.getData();  // get your series data
    var xaxis = somePlot.getXAxes()[0]; // xAxis
    var yaxis = somePlot.getYAxes()[0]; // yAxis
    var offset = somePlot.getPlotOffset(); // plots offset
    ctx.font = "12px 'Segoe UI'"; // set a pretty label font
    ctx.fillStyle = "black";
    for (var i = 0; i < allSeries.length; i++){
        var series = allSeries[i];        
        var dataPoint = series.datapoints.points; // one point per series
        var x = dataPoint[0];
        var y = dataPoint[1];  
        var text = x + '%';
        var metrics = ctx.measureText(text);        
        var xPos = xaxis.p2c(x)+offset.left - metrics.width; // place at end of bar
        var yPos = yaxis.p2c(y) + offset.top - 2;
        ctx.fillText(text, xPos, yPos);
    }

更新了fiddle.

标签：javascript,jquery,flot
来源： https://codeday.me/bug/20191009/1878971.html

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

ICode9

javascript-水平条形图上的Flot数据标签