水平条形图上的Flot数据标签 [英] Flot Data Labels on Horizontal Bar Chart

问题描述

Too much code to paste here so....

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

Please see JS Fiddle at http://jsfiddle.net/1a2s35m2/ for current code.

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

I am attempting to create a horizontal bar chart using flot. As you will see from the Fiddle, this works fine but I want to display the values of the bars within the bars themselves and not as labels in the Y Axis, as in the picture below...

我尝试使用标签"插件和barnumbers插件，但这些似乎不起作用. (小节号接近，但显示0 1 2 3作为值.

I have attempted to use the "labels" plugin and also the barnumbers plugin but these don't seem to work. (Barnumbers comes close but displays 0 1 2 3 as the values.

有什么想法吗?

推荐答案

我真的开始听起来像记录，但是当您的图表变得非常复杂时，请忘记使用插件，然后自己完成.

I'm really starting to sound like a broken record on here, but as your charts become really complicated forget the plugins and do it yourself.

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

Here's modified code from my links above catered for how you drew your plots:

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

更新了小提琴.

这篇关于水平条形图上的Flot数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！