Flot динамически показывает / скрывает метку xaxis на основе данных - PullRequest
Новая
       39

Flot динамически показывает / скрывает метку xaxis на основе данных

0 голосов
/ 18 декабря 2018

Мне нужна помощь по поводу ярлыка xaxis ticks .. снова .. Я застрял с этой проблемой.Я хочу скрыть метку и ось xaxis, когда данные равны 0. 

$(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 (любезно предоставлено Райдри).

Я хочу скрыть метку с 8 по 31 июля, поскольку используется 0, но все еще показывает 1 июля.

Есть ли способ сделать это?У меня только эта настройка 

xaxis: {show:false}

1 Ответ

0 голосов
/ 18 декабря 2018

Чтобы отобразить только некоторые метки тиков, вы можете использовать условную функцию tickFormatter для оси x, например 

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 '';
    }
}

См. обновленную скрипку для полного примера.

...