Question

我有2个阵列：

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

标签数组中的

单个单元格看起来像[{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是。

Answer 2

您想根据数组中的值过滤刻度吗？当可以使用简单的运行时过滤器时，似乎有些过度修改源代码。鉴于这些轴刻度：

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
},

小提琴here。

Answer 3

如文档的Customizing the Axes部分所述，tickFormatter接受一个函数; "string"不起作用。如果希望更改刻度线，还需要调用setupGrid和draw重绘绘图。

但你的基本想法是正确的;你可以使用tickFormatter或直接设置ticks数组。不需要修改Flot源。

Jquery flot插件，隐藏特定标签

3 个答案: