Flot Xaxis标签在多个图表上消失

Question

当显示两个单独的条形图时，x轴标签消失，但仅显示1个图时，标签显示得很好。

您对此有想法吗？

显示两个图形：

显示一个图形：

以下是使用的javascript：

<script>
var statement = [
    [gd(2018, 2, 1), 44578],
    [gd(2018, 2, 2), 550],
    [gd(2018, 2, 3), 600],
    [gd(2018, 2, 4), 500],
    [gd(2018, 2, 5), 700],
    [gd(2018, 2, 6), 38339],
    [gd(2018, 2, 7), 28518],
    [gd(2018, 2, 8), 21629],
    [gd(2018, 2, 9), 50716],
    [gd(2018, 2, 10), 29774],
    [gd(2018, 2, 11), 24562],
    [gd(2018, 2, 12), 63659],
    [gd(2018, 2, 13), 29186],
    [gd(2018, 2, 14), 62470],
    [gd(2018, 2, 15), 82143],
    [gd(2018, 2, 16), 12774],
    [gd(2018, 2, 17), 13607],
    [gd(2018, 2, 18), 7058],
    [gd(2018, 2, 19), 32801],
    [gd(2018, 2, 20), 25184],
    [gd(2018, 2, 21), 22912],
    [gd(2018, 2, 22), 35300],
    [gd(2018, 2, 23), 20038],
    [gd(2018, 2, 24), 21566],
    [gd(2018, 2, 25), 73290],
    [gd(2018, 2, 26), 43411],
    [gd(2018, 2, 27), 36330],
    [gd(2018, 2, 28), 40766]
];
var dataset = [{
    label: "Consumption",
    data: statement,
    color: "#ffa500",
    bars: {
        show: true,
        align: "center",
        barWidth: 24 * 60 * 60 * 600,
        lineWidth: 2,
        fill: 1
    }
}];
var options = {
    xaxis: {
        mode: "time",
        tickSize: [3, "day"],
        timeformat: "%e %b",
        tickLength: 0,
        rotateTicks: 135,
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 1,
        axisLabelFontFamily: "Calibri",
        axisLabelPadding: 1,
        color: "black"
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "'000 kWh",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: "Calibri",
        axisLabelPadding: 15,
        align: "center",
        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"]
        }
    }
};
$(document).ready(function() {
    $.plot($("#graph-placeholder"), dataset, options);
});

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

<script>
var statementMonthly = [
    [gdMonthly(2018, 1, 1), 0],
    [gdMonthly(2018, 2, 1), 2351.8],
    [gdMonthly(2018, 3, 1), 1209.6],
    [gdMonthly(2018, 4, 1), 1205.6],
    [gdMonthly(2018, 5, 1), 0],
    [gdMonthly(2018, 6, 1), 515.382],
    [gdMonthly(2018, 7, 1), 621.921],
    [gdMonthly(2018, 8, 1), 0],
    [gdMonthly(2018, 9, 1), 0],
    [gdMonthly(2018, 10, 1), 551.3],
    [gdMonthly(2018, 11, 1), 0],
    [gdMonthly(2018, 12, 1), 0]
];
var datasetMonthly = [{
    data: statementMonthly,
    color: "#526270",
    bars: {
        show: true,
        align: "center",
        barWidth: 800 * 65 * 60 * 700,
        lineWidth: 2,
        fill: 1
    }
}];
var optionsMonthly = {
    xaxis: {
        mode: "time",
        tickSize: [1, "month"],
        timeformat: " %b",
        monthNames: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
        tickLength: 0,
        rotateTicks: 179,
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 1,
        axisLabelFontFamily: "Calibri",
        axisLabelPadding: 1,
        color: "black"
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "'000 kWh",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: "Calibri",
        axisLabelPadding: 15,
        align: "center",
        tickFormatter: function numberWithCommasMonthly(x) {
            return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        }
    }],
    legend: {
        container: $("#legendContainerMonthly"),
        noColumns: 2,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 1,
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    }
};
$(document).ready(function() {
    $.plot($("#graph-placeholderMonthly"), datasetMonthly, optionsMonthly);
});

function gdMonthly(year, month, day) {
    return Date.UTC(year, month - 1, day);
}

我不明白为什么xaxis标签消失了。 我想念什么？

希望你能帮助我。

Answer 1

找到了问题的原因。 问题是由此插件引起的：   jquery.flot.tickrotor.js

我刚刚删除了第二张图上的插件，标签现在可以正常工作了。