Question

我正在使用jqplo使用当天的值渲染过去几天的图表。

我想显示tickLabels，但仅限于星期一。我似乎无法弄明白该怎么做。这是我目前的javascript。

我在想我应该在tickOptions的showLabel选项后面有一个函数，但这似乎没有用。

var data = [
    [6, 11, 27, 0, 0, 10, 15, 14, 8]
];
plotLine = $.jqplot('lineGraph', data, {
    animate: true,
    animateReplot: true,
    sort: false,
    axes: {
        xaxis: {
            label: 'Time',
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ["28/10/2015", "29/10/2015", "30/10/2015", "31/10/2015", "01/11/2015", "02/11/2015", "03/11/2015", "04/11/2015", "05/11/2015"],
            showTicks: true,
            tickOptions: {
                showLabel: function(myTick) {
                    return myTick == '02/11/2015';
                }()
            },
            tickRenderer: $.jqplot.CanvasAxisTickRenderer
        },
        yaxis: {
            label: '# Messages',
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            min: 0,
            showTickMarks: false
        }
    },
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        color: "#38B186",
        shadow: false,
        showMarker: false
    },
    highlighter: {
        show: true,
        showMarker: false,
        showTooltip: true,
        tooltipFormatString: "%s",
        customTickAxesFormatter: true,
        tooltipLocation: 'n'
    },
    grid: {
        background: '#FFFFFF',
        shadow: false
    },
    canvasOverlay: {
        show: true,
        objects: [{
            rectangle: {
                xmin: 3.5,
                xmax: 5.5,
                yminOffset: "0px",
                ymaxOffset: "0px",
                color: "rgba(190,190,190,0.3)",
                showTooltip: false
            }
        }, {
            rectangle: {
                xmin: 10.5,
                xmax: 12.5,
                yminOffset: "0px",
                ymaxOffset: "0px",
                color: "rgba(190,190,190,0.3)",
                showTooltip: false
            }
        }, {
            rectangle: {
                xmin: 17.5,
                xmax: 19.5,
                yminOffset: "0px",
                ymaxOffset: "0px",
                color: "rgba(190,190,190,0.3)",
                showTooltip: false
            }
        }, {
            rectangle: {
                xmin: 24.5,
                xmax: 26.5,
                yminOffset: "0px",
                ymaxOffset: "0px",
                color: "rgba(190,190,190,0.3)",
                showTooltip: false
            }
        }]
    }
});

Answer 1

可能不是最优雅的解决方案，但根据我的理解，jqplot将显示传入的数组中的所有刻度。因此，对于星期一不是星期一，您的数组可能包含空字符串，例如：

["", "", "", "", "", "02/11/2015", "", "", ""]

要制作通用解决方案，您可以定义循环日期范围的函数并构造刻度数组（包括空字符串）：

function makeTickLabels() {
    var result = [];
    // Note: months are 0 based in Javascript
    for (var d = new Date(2015, 9, 28); d <= new Date(2015, 10, 5); d.setDate(d.getDate() + 1)) {
        if (d.getDay() == 1) {
            // Monday, so display the date
            result.push(d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear());
        } else {
            // Not a Monday so display the empty string
            result.push("");
        }
    }
    return result;
}

然后修改axes.xaxis参数，如下所示：

axes: {
    xaxis: {
        label: 'Time',
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
        renderer: $.jqplot.CategoryAxisRenderer,
        // call function to construct tick labels
        ticks: makeTickLabels(),
        showTicks: true,
        // tickOptions removed
        tickRenderer: $.jqplot.CanvasAxisTickRenderer
    },

可以找到一个完整的示例here

jqplot只渲染tickLabels的子集

1 个答案: