根据数据动态浮动show/hide x轴标签

Question

我需要有关 xaxis 刻度标签的帮助..再次..我被这个问题困住了。我想在数据为 0 时隐藏 xaxis ticklabel 和 bar。

$(function() {

var statement = [
    [gd(2018, 6, 1), 0],
    [gd(2018, 6, 2), 2000000],
    [gd(2018, 6, 3), 240000000],
    [gd(2018, 6, 4), 260000000],
    [gd(2018, 6, 5), 280000000],
    [gd(2018, 6, 6), 300000000],
    [gd(2018, 6, 7), 320000000],
    [gd(2018, 6, 8), 0],
    [gd(2018, 6, 9), 0],
    [gd(2018, 6, 10), 0],
    [gd(2018, 6, 11), 0],
    [gd(2018, 6, 12), 0],
    [gd(2018, 6, 13), 0],
    [gd(2018, 6, 14), 0],
    [gd(2018, 6, 15), 0],
    [gd(2018, 6, 16), 0],
    [gd(2018, 6, 17), 0],
    [gd(2018, 6, 18), 0],
    [gd(2018, 6, 19), 0],
    [gd(2018, 6, 20), 0],
    [gd(2018, 6, 21), 0],
    [gd(2018, 6, 22), 0],
    [gd(2018, 6, 23), 0],
    [gd(2018, 6, 24), 0],
    [gd(2018, 6, 25), 0],
    [gd(2018, 6, 26), 0],
    [gd(2018, 6, 27), 0],
    [gd(2018, 6, 28), 0],
    [gd(2018, 6, 29), 0],
    [gd(2018, 6, 30), 0]
];
var dataset = [{
    label: "Electricity Consumption",
    data: statement,
    color: "#ffa500",
    bars: {
        show: true,
        align: "center",
        barWidth: 24 * 60 * 60 * 600,
        lineWidth: 1
    }
}];


var options = {
    xaxis: {
        mode: "time",
        tickSize: [1, "day"],
        timeformat: "%d %b",
        tickLength: 0,
        rotateTicks: 135,
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 8,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 5,
        color: "black"
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "Usage",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 3,
        tickDecimals: 0,
        tickFormatter: function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        }
    }],
    legend: {
        container: $("#legendContainer"),
        noColumns: 2,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 1,
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    }
};


$.plot($("#placeholder"), dataset, options);

function gd(year, month, day) {
    console.log(Date.UTC(year, month - 1, day), new Date(Date.UTC(year, month - 1, day)));
    return Date.UTC(year, month - 1, day);
}

});

这是对应的 jfiddle（由 Raidri 提供）。

我想隐藏 7 月 8 日至 31 日的标签，因为使用率为 0 但仍显示 7 月 1 日。

有办法吗？我只有这个设置

xaxis: {show:false}

Answer 1

要仅显示一些刻度标签，您可以对 x 轴使用条件 tickFormatter 函数，例如

tickFormatter: function (tickValue, axis) {
    // looking for datapoint at this tick
    var value = dataset[0].data.find(dp => dp[0] == tickValue);
    if ((tickValue == dataset[0].data[0][0]) || (value && value[1] > 0.0)) {
        // first tick on the axis or a tick where the value is greater zero
        var tickDate = new Date(tickValue);
        // manually setting the tick format
        return (tickDate.getDate() < 10 ? ('0' + tickDate.getDate()) : tickDate.getDate()) + '<br />' + monthNames[tickDate.getMonth()];
    }
    else {
        return '';
    }
}

完整示例请参阅此 updated fiddle。

根据数据动态浮动show/hide x轴标签

Flot dynamically show/hide xaxis label based on data

javascript

jquery

graph

flot