javascript - Jquery flot插件，隐藏特定标签

Question

我正在使用jQuery Flot Plugin

我有 2 个数组:

1个数据数组长度为50~

1 个标签数组与数据数组长度相同并包含日期字符串。

这是 float 选项:

this._flowOptions = {
series: {
    legend : {
        show: true
    },
    lines: {
        show: true,
        fill: true,
        lineWidth: 2
    },
    points : {
        show : true
    },
    bars: {
        show: false
    }
},
xaxis : {
    show: true,
    position: "bottom",
    color: "black",
    tickColor: "black",
    font: "arial",
    min: 0,
    max: 30,
    tickFormatter: "string"
},
yaxis : {
    min : 0,
    tickDecimals: 0
},
grid: {
    show: true,
    hoverable : true
}

问题是当我想在我的flot中显示50个带有50个数据点的标签时，它看起来不太好。我如何将属性附加到标签数组以防止显示其中几个。

标签数组中的单个单元格看起来像 [{xValue,StringValue}]，因为它应该是正确设置的。

我尝试使用xaxis.tickFormatter选项，但它对我不起作用，由于某种原因我的函数没有被触发。

任何想法都会很棒。

编辑

主要思想是，当我将鼠标悬停在图表的数据点时，我将能够显示 x 轴值和 y 轴值，但如果可能的话，有必要不要显示所有标签，只显示那些我会决定的标签在提供标签数组时显示。

Answer 1

好吧，这是不可能的，但如果有人正在寻找它，我就自己构建了它。复制以下更改

function drawAxisLabels() {

        $.each(allAxes(), function (_, axis) {
            if (!axis.show || axis.ticks.length == 0)
                return;

            var box = axis.box,
                legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
                layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
                font = axis.options.font || "flot-tick-label tickLabel",
                tick, x, y, halign, valign;

            surface.removeText(layer);

            for (var i = 0; i < axis.ticks.length; ++i) {

                tick = axis.ticks[i];
                if (!tick.label || tick.v < axis.min || tick.v > axis.max)
                    continue;

                if (axis.direction == "x") {
                    halign = "center";
                    x = plotOffset.left + axis.p2c(tick.v);
                    if (axis.position == "bottom") {
                        y = box.top + box.padding;
                    } else {
                        y = box.top + box.height - box.padding;
                        valign = "bottom";
                    }
                } else {
                    tick.IsDisplay = true;      //default to always show Y axis
                    valign = "middle";
                    y = plotOffset.top + axis.p2c(tick.v);
                    if (axis.position == "left") {
                        x = box.left + box.width - box.padding;
                        halign = "right";
                    } else {
                        x = box.left + box.padding;
                    }
                }

                surface.addText(layer, x, y, tick.label, font, null, null, halign, valign, tick.IsDisplay);
            }
        });
    }
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign, isDisplay ) {

    var info = this.getTextInfo(layer, text, font, angle, width),
        positions = info.positions;

    // Tweak the div's position to match the text's alignment

    if (halign == "center") {
        x -= info.width / 2;
    } else if (halign == "right") {
        x -= info.width;
    }

    if (valign == "middle") {
        y -= info.height / 2;
    } else if (valign == "bottom") {
        y -= info.height;
    }

    // Determine whether this text already exists at this position.
    // If so, mark it for inclusion in the next render pass.

    for (var i = 0, position; position = positions[i]; i++) {
        if (position.x == x && position.y == y) {
            position.active = true;
            return;
        }
    }

    // If the text doesn't exist at this position, create a new entry

    // For the very first position we'll re-use the original element,
    // while for subsequent ones we'll clone it.

    position = {
        active: true,
        rendered: false,
        element: positions.length ? info.element.clone() : info.element,
        x: x,
        y: y
    }

    positions.push(position);

    // Move the element to its final position within the container
    isDisplay = (isDisplay === undefined || isDisplay === null || isDisplay);    //we want to hide label only if provided with False
    position.element.css({
        top: Math.round(y),
        left: Math.round(x),
        'text-align': halign,   // In case the text wraps
        display :(!isDisplay) ?  'none' : 'inline-block'
    });
};

function setTicks(axis) {
        var oticks = axis.options.ticks, ticks = [];
        if (oticks == null || (typeof oticks == "number" && oticks > 0))
            ticks = axis.tickGenerator(axis);
        else if (oticks) {
            if ($.isFunction(oticks))
                // generate the ticks
                ticks = oticks(axis);
            else
                ticks = oticks;
        }

        // clean up/labelify the supplied ticks, copy them over
        var i, v;
        axis.ticks = [];
        for (i = 0; i < ticks.length; ++i) {
            var label = null;
            var IsDisplay = false;
            var t = ticks[i];
            if (typeof t == "object") {
                v = +t[0];
                if (t.length > 1) {
                    label = t[1];
                    IsDisplay = t[2];
                }


            }
            else
                v = +t;
            if (label == null)
                label = axis.tickFormatter(v, axis);
            if (!isNaN(v))
                axis.ticks.push({ v: v, label: label, IsDisplay : IsDisplay });
        }
    }

现在，当您设置刻度时，您只需执行以下操作 options.xaxis.ticks.push([i, labels[i], IsDisplay]);//IsDisplay 是如果您想展示还是不想展示。