javascript - 如何删除Flot中的y轴刻度

我正在使用flot生成条形图。
这是我的代码bar graph code


我需要使y轴刻度消失。
我需要在每个栏的顶部放置一些标签


怎么做？

最佳答案

好吧，在与Flot进行了大量混搭并下载了源代码之后，我终于为您找到了一个很好的起点。

jsFiddle演示为here。

该代码的胆量是使用drawSeries的钩子来绘制标签的：

function drawSeriesHook(plot, canvascontext, series) {
    var ctx = canvascontext,
        plotOffset = plot.offset(),
        labelText = 'TEST', // customise this text, maybe to series.label
        points = series.datapoints.points,
        ps = series.datapoints.pointsize,
        xaxis = series.xaxis,
        yaxis = series.yaxis,
        textWidth, textHeight, textX, textY;
    // only draw label for top yellow series
    if (series.label === 'baz') {
        ctx.save();
        ctx.translate(plotOffset.left, plotOffset.top);

        ctx.lineWidth = series.bars.lineWidth;
        ctx.fillStyle = '#000'; // customise the colour here
        for (var i = 0; i < points.length; i += ps) {
            if (points[i] == null) continue;

            textWidth = ctx.measureText(labelText).width; // measure how wide the label will be
            textHeight = parseInt(ctx.font); // extract the font size from the context.font string
            textX = xaxis.p2c(points[i] + series.bars.barWidth / 2) - textWidth / 2;
            textY = yaxis.p2c(points[i + 1]) - textHeight / 2;
            ctx.fillText(labelText, textX, textY); // draw the label
        }
        ctx.restore();
    }
}

请参阅注释，以了解可以在何处自定义标签。

要删除y轴刻度，这只是一个简单的选项设置。此外，您可以计算出每个条形图的最大y值，然后向其添加大约100，以设置最大的Y值，该值将允许标签占用空间。所有这些的代码将变为：

// determine the max y value from the given data and add a bit to allow for the text
var maxYValue = 0;
var sums = [];
$.each(data,function(i,e) {
    $.each(this.data, function(i,e) {
        if (!sums[i]) {
            sums[i]=0;
        }
        sums[i] += this[1]; // y-value
    });
});
$.each(sums, function() {
    maxYValue = Math.max(maxYValue, this);
});
maxYValue += 100; // to allow for the text


var plot = $.plot($("#placeholder"), data, {
    series: {
        stack: 1,
        bars: {
            show: true,
            barWidth: 0.6,
        },
        yaxis: {
            min: 0,

            tickLength: 0
        }
    },
    yaxis: {
        max: maxYValue, // set a manual maximum to allow for labels
        ticks: 0 // this line removes the y ticks
    },
    hooks: {
        drawSeries: [drawSeriesHook]
    }
});

那应该让您开始。我敢肯定，您可以从这里拿走它。

关于javascript - 如何删除Flot中的y轴刻度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9375348/