【问题标题】:Jquery flot plugin, Hiding specific labelsJquery flot 插件,隐藏特定标签
【发布时间】:2013-12-26 09:08:55
【问题描述】:

我正在使用jQuery Flot Plugin

我有 2 个数组:

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

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

这是浮动选项:

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
}

问题是当我想在我的浮点数中显示 50 个标签和 50 个数据点时,它看起来不太好。 如何将属性附加到标签数组以防止显示它们。

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

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

任何想法都会很棒。

编辑

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

【问题讨论】:

  • 我已经为此苦苦挣扎了好几个小时!

标签: javascript jquery flot


【解决方案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 是如果你想显示或不显示。

【讨论】:

  • 太棒了!正在寻找确切的东西!
【解决方案2】:

您想根据数组中的值过滤您的报价吗?当一个简单的运行时过滤器是可能的时,修改源似乎有点过头了。鉴于这些轴刻度:

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

在您的 xaxis 刻度选项中,只需将那些错误的过滤掉......

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

小提琴here

【讨论】:

    【解决方案3】:

    如文档的Customizing the Axes 部分所述,tickFormatter 接受一个函数; "string" 不会工作。您还需要调用setupGriddraw 来在您想要改变刻度时重新绘制绘图。

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

    【讨论】:

    • ofc 我这样做了,但函数本身根本没有被触发。无论如何,我在修改 flot 文件时发布了这个问题的答案
    • @DNS,当您指定刻度数组时,不会调用 tickFormatter 函数。这是一个错误还是设计使然?
    • 我没想到会这样;我想知道当我合并那些修复滴答生成问题的拉取请求时它是否坏了。我要做一些测试。
    • @Mark 所以这实际上是按预期工作的;我错过了您将刻度作为 [value, label] 对提供的事实。如果刻度数组是,例如[1, 2, 3],然后将调用格式化程序为这些值生成标签。但是,如果您提供,例如[[1, "A"], [2, "B"], [3, "C"]],然后 Flot 会看到您已经提供了标签并且不会尝试覆盖它们。所以“tickFormatter”这个名字可能有点误导。它更像'tickLabelGenerator',如果标签已经存在,则不需要调用它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-27
    • 2015-06-06
    相关资源
    最近更新 更多