jqplot只渲染tickLabels的子集

I'm using jqplo to render a graph of the past days with a value for that day.

我正在使用jqplo来渲染过去几天的图表,其中包含当天的值。

I want to show the tickLabels, but only on mondays. I can't seem to figure out how to do it. This is the javascript I have at the moment.

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

I was thinking I should have a function behind the showLabel option of the tickOptions, but that doesn't seem to be working.

我在想我应该在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
            }
        }]
    }
});

1 个解决方案

#1

Probably not the most elegant solution but from what I understand jqplot will display all the ticks in the array passed in. Therefore for days that aren't Monday your array could contain the empty string e.g:

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

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

To make a generic solution, you could define a function that loops over a date range and constructs the array of ticks (including the empty strings):

要创建通用解决方案,您可以定义循环日期范围的函数并构造刻度数组(包括空字符串):

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

Then modify the axes.xaxis parameter as follows:

然后修改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
    },

A complete example can be found here

这里有一个完整的例子

#1