如何在Jquery Flot Chart中添加标签？ [英] How to add labels in Jquery Flot Chart?

问题描述

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

I need to add labels in the Jquery Flot chart. Currently it's only providing the labels on mouse over, instead of that I need to show the labels just after the bar. I have attached an image along with this question. In the position of hash (#) I need to place the bar labels there. Please get me a solution for this. Thanks in Advance.

 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);

推荐答案

正如我所说，在答案中我给了这里，我发现最简单的方法就是自己动手。

As I stated, in the answer I gave here, I find it easiest to just do it yourself.

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
} 

这是一个用您的代码更新小提琴。

这篇关于如何在Jquery Flot Chart中添加标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！