Javascript Jquery flot插件，隐藏特定标签

我正在使用

我有两个阵列：

1个数据数组，长度为50~

1标签数组的长度与数据数组的长度相同，并且包含日期字符串

以下是flot选项：

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个数据点时，它看起来不太好。 如何将属性附加到labels数组以防止显示其中的两个属性

标签数组中的单个单元格看起来像[{xValue，StringValue}]，它应该是这样的，以便将其设置正确

我尝试使用xaxis.tickFormatter选项，但它对我不起作用，因为某些原因，我的函数没有启动

任何想法都很好

编辑

---

其主要思想是，我将能够在悬停图形的数据点时显示x轴值和y轴值，但如果可能，有必要不显示所有标签，仅显示在提供标签数组时决定显示的标签

好吧，这是不可能的，但如果有人在找它，我自己造的。 复制以下更改

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是指是否显示。

如文档部分所述，tickFormatter接受一个函数；绳子坏了。您还需要调用setupGrid和draw，以便在需要更改刻度时重新绘制绘图

---

但是你的基本想法是正确的；您可以使用tickFormatter，也可以直接设置ticks数组。无需修改Flot源。

是否要根据数组中的值筛选标记？当一个简单的运行时过滤器成为可能时，修改源代码似乎有些过分。给定这些轴刻度：

var tickArray = [[0, "Zero", true],
                 [5, "Five", false],
                 [10, "Ten", true],
                 [15, "Fifteen", true]];

在您的xaxis ticks选项中，只需将那些错误的选项过滤掉

xaxis : {
    ticks: $(tickArray).filter(function(i){return this[2] == true}) // a little jquery magic to filter the arrays
},

---

小提琴

太棒了！我在找确切的东西！我已经为此挣扎了好几个小时了！ofc我这么做了，但函数本身根本没有启动。无论如何，当我被修改flot时，我发布了这个问题的答案file@DNS，指定记号数组时，不会调用tickFormatter函数。这是一个bug还是设计出来的？我没料到；我想知道，当我合并这些pull请求修复滴答生成问题时，它是否崩溃了。我要做一些测试。@Mark所以这实际上是按预期工作的；我忽略了这样一个事实，即您提供的刻度是[值，标签]对。如果ticks数组为，例如[1，2，3]，那么将调用格式化程序为这些值生成标签。但是如果您提供了[1，A]、[2，B]、[3，C]]，那么Flot会发现您已经提供了标签，并且不会试图覆盖它们。因此，“tickFormatter”这个名字可能有点误导；它更像是“tickLabelGenerator”，如果标签已经存在，那么就不需要调用它。