javascript – 如何在Jquery Flot Chart中添加标签？

2019-09-29 03:39:26 阅读：185 来源： 互联网

我需要在Jquery Flot图表中添加标签.目前它只提供鼠标悬停的标签,而不是我需要在栏后显示标签.我附上了一个图像和这个问题.在hash(#)的位置我需要在那里放置条形标签.请给我一个解决方案.
提前致谢.

 for (i = 0; i < bardata.length; i++)  {

            ds.push({
                label: yearArry[i],
                data : bardata[i],
            });

    }
var options = {
        colors : colorArray,
        grid : {
            hoverable : true,
            clickable : true,
            tickColor : $chrt_border_color,
            borderWidth : $chrt_border_width,
            borderColor : $chrt_border_color,
        },
        series: {
            stack:true,
            bars: {
                show : true,
                barWidth : 0.8,
                horizontal: true,
                align: "center"
            }
        },
        xaxis: {
            tickFormatter: function(val, axis) { return val < axis.max ? abbreviateNumber(val) : "Cost"; }
        },
        yaxis: {
            ticks: company_label
        },
        legend: {
            show: showLegend,
            position: "ne",
            noColumns : 1,
            backgroundOpacity: 0.5,
            margin: [0, -70]
        },
        tooltip : true,
        tooltipOpts : {
            content : "<b>%s</b> : <span>$%x</span>",
            defaultTheme : false,
        }
    };

    // Plot the graph with the data and options provided
    $.plot($("#flotchart"), ds, options);

解决方法:

正如我所说,在给出here的答案中,我觉得最简单的方法就是自己动手.

var somePlot = $.plot($("#flotchart"), ds, options);

var ctx = somePlot.getCanvas().getContext("2d");  //canvas context
var series = somePlot.getData();
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 < series.length; i++){
    var text = '$' + series[i].data[0][0]; // x data point
    var metrics = ctx.measureText(text);
    var xPos = (xaxis.p2c(series[i].data[0][0])+offset.left);
    var yPos = yaxis.p2c(series[i].data[0][2]) + offset.top + 5; // get positions
    ctx.fillText(text, xPos, yPos); // add the label
}

这是你的代码updated fiddle.

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

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

ICode9

javascript – 如何在Jquery Flot Chart中添加标签？