jqplot отображает только подмножество tickLabels

Question

Я использую jqplo для отображения графика прошлых дней со значением за этот день.

Я хочу показать tickLabels, но только по понедельникам. Я не могу понять, как это сделать. Это javascript, который у меня есть на данный момент.

Я думал, что у меня должна быть функция позади опции showLabel для tickOptions, но это, похоже, не работает.

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