Question

我正在尝试制作一个高级渲染视图，只在星期日，x轴上会显示我已经设法有适当的周颜色，这意味着每个月都有不同的颜色，我正在使用它的ractangle，到目前为止它看起来不错，问题是x轴不能只显示星期日

xaxis: {
   renderer:$.jqplot.DateAxisRenderer,
   min: dFrom,
   max:   dTo,
   tics: ytics,
   numberTicks:yticcount,
   tickOptions:{
        showGridline: false,
        formatString:"%#d"
       }
 }

其中dFrom是'2014-1-1'd'是'2014-1-31'，yticcount只是每月星期日的数量（2014年1月是4），ytics是：

[["2014-1-1", ""], ["2014-1-2", ""], ["2014-1-3", ""], ["2014-1-4", ""], ["2014-1-5", "2014-1-5"], ["2014-1-6", ""], ["2014-1-7", ""], ["2014-1-8", ""], ["2014-1-9", ""], ["2014-1-10", ""], ["2014-1-11", ""], ["2014-1-12", "2014-1-12"], ["2014-1-13", ""], ["2014-1-14", ""], ["2014-1-15", ""], ["2014-1-16", ""], ["2014-1-17", ""], ["2014-1-18", ""], ["2014-1-19", "2014-1-19"], ["2014-1-20", ""], ["2014-1-21", ""], ["2014-1-22", ""], ["2014-1-23", ""], ["2014-1-24", ""], ["2014-1-25", ""], ["2014-1-26", "2014-1-26"], ["2014-1-27", ""], ["2014-1-28", ""], ["2014-1-29", ""], ["2014-1-30", ""], ["2014-1-31", ""]]

如你所知，如果确切的日期是星期日，那么它包含空字符串或第二个参数的日期。

问题实际上是jqplot总是包含/ show start和last记录，我想从第一个星期日开始，并且仅在星期日显示抽搐，第二个问题是jqplot忽略滴答选项。

Answer 1

为此您实际上不需要DateAxisRenderer，您可以使用LinearAxisRenderer并提供格式化的刻度（数据应转换为时间戳）。另一种选择是将格式化程序与tics结合使用，但这更简单：

function getDaysInMonthTicks(month, year) {
    var date = new Date(year, month, 1);
    var days = [];
    var tstamp;
   while (date.getMonth() === month) {
        tstamp = date.getTime();
        if (date.getDay() == 0) {
            days.push([tstamp,$.jsDate.strftime(tstamp, '%Y/%m/%d')]);
        } else {
            days.push([tstamp]);
        }
        date.setDate(date.getDate() + 1);
    }
    return days;
}
function parseDate(input) {
    var parts = input.split('-');
    return new Date(parts[0], parts[1]-1, parts[2]).getTime(); // months are 0-based
}

$(document).ready(function () {

    var bars = [
        [parseDate('2014-01-5'), 21],
        [parseDate('2014-01-10'), 21],
        [parseDate('2014-01-12'), 22],
        [parseDate('2014-01-15'), 21],
        [parseDate('2014-01-19'), 22],
        [parseDate('2014-01-26'), 18]
    ];

    var plot1 = $.jqplot('chart1', [bars], {
        title: 'Default Date Axis',
        axes: {
            xaxis: {
                renderer:$.jqplot.LinearAxisRenderer,
                min:parseDate("2014-1-1"),
                max:parseDate("2014-1-31"),
                ticks: getDaysInMonthTicks(0,2014)
            }
        },
        series: [{
            pointLabels: {
                show: true,
                stackedValue: true
            },
            color: "#00749F",
            label: "peer expenses" 
        }],
        legend: {
            show: true,
            location: 'e',
            placement: "outsideGrid"
        }
    });
});

JSFiddle link

Answer 2

以下是解决方案：JsFiddle Link

要记住几件事：

在xaxis内，请指定min valus作为正确的星期日，然后即使您不提供max值，它仍然有效。它将根据您提供的数据确定最大点数。在下面的示例中，只是尝试注释掉max属性，然后运行该程序。你会看到我在说什么。

如果您指定tickInterval，则无需指定numberTicks。您可以通过提供max值来控制刻度数。

$（document）.ready（function（）{

    var bars = [
        ['2014-01-5', 21],
        ['2014-01-10', 21],
        ['2014-01-12', 22],
        ['2014-01-15', 21],
        ['2014-01-19', 22],
        ['2014-01-26', 18]
    ];

    var plot1 = $.jqplot('chart1', [bars], {
        title: 'Default Date Axis',
        axes: {
            xaxis: {
                renderer:$.jqplot.DateAxisRenderer,
                tickInterval:"7 day",
                min:"2014-1-5",
                max:"2014-1-26"
            }
        },
        series: [{
            pointLabels: {
                show: true,
                stackedValue: true
            },
            color: "#00749F",
            label: "peer expenses" 
        }],
        legend: {
            show: true,
            location: 'e',
            placement: "outsideGrid"
        }
    });
});

jqplot日期渲染，仅在x轴上显示星期日

2 个答案: