highchart место х-ось этикетка между клещами по оси даты и времени

Question

Используя различные сообщения/вопросы SO как ссылки я создал Разброс highchart jsfiddle

xAxis: { 
     opposite:true, 
     type: 'datetime', 
     gridLineWidth: 1, 
     gridLineDashStyle: 'ShortDot', 
     gridLineColor:'black', 
     alternateGridColor: 'lightgrey', 
     tickInterval: 3 * 30 * 24 * 3600 * 1000, // 1 quarter 
     labels: { 
      //align: "left", 
      //padding:200, 
      formatter: function() { 
       var s = ""; 
       if (Highcharts.dateFormat('%b', this.value) == 'Jan') { 
        s = s + "Q1" 
       }; 
       if (Highcharts.dateFormat('%b', this.value) == 'Apr') { 
        s = s + "Q2" 
       }; 
       if (Highcharts.dateFormat('%b', this.value) == 'Jul') { 
        s = s + "Q3" 
       }; 
       if (Highcharts.dateFormat('%b', this.value) == 'Oct') { 
        s = s + "Q4" 
       }; 
       s = s + " " + Highcharts.dateFormat('%Y', this.value); 
       return s; 
      } 
     }, 
     plotLines: [{ 
      color: 'red', // Color value 
      value: now, // Value of where the line will appear 
      width: 2, // Width of the line 
      label: { 
       text: 'Now', 
       align: 'center', 
       verticalAlign: 'bottom', 
       y: +20, 
       rotation: 0 
      } 
     }] 
    }, 

Но я поражен, имеющую метку оси Х расположенный рядом с галочкой. Как переместиться в середину сетки?

Есть в любом случае я могу достичь ниже?

Я попробовал выровнять, заполнить, но не помогло. Когда график увеличивается, я все равно должен располагать метки, расположенные посередине. Должен ли я что-нибудь сделать с tickInterval? Это может быть простая собственность, которую мне не хватает.

Я нашел эту ссылку jsfiddle, которая касается моей озабоченности, но с 2-х осями по оси, и я заполняю данные из списка.

Answer 1

Я реализовал решение Кристофера Cortez»найдено here:

Однако, также изменен на огонь по Highcharts load событие, а не обратный вызов, и я изменил его следует напомнить, когда событие HighCharts redraw будет запущено, чтобы они оставались выровненными при изменении размера страницы.

$('#container').highcharts({ 
     chart: { 
      defaultSeriesType: 'scatter', 
      events: { 
       load: centerLabels, 
       redraw: centerLabels      
      } 
     }, 

     /* ... all the other options ...*/ 

}); 

Где

function centerLabels(chart) {   
    var $container = $(chart.target.container); 
    var axes = chart.target.axes; 

    var $labels = $container.find('.highcharts-axis-labels .timeline_label'); 
    var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos; 

    $labels.each(function() { 
     $thisLabel = $(this).parent('span'); 
     thisXPos = parseInt($thisLabel.css('left')); 

     $nextLabel = $thisLabel.next(); 
     // next position is either a label or the end of the axis 
     nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : axes[0].left + axes[0].width; 
     delta = (nextXPos - thisXPos)/2.0; 
     newXPos = thisXPos + delta; 

     // remove the last label if it won't fit 
     if ($nextLabel.length || $(this).width() + newXPos < nextXPos) { 
      $thisLabel.css('left', newXPos + 'px'); 
     } else { 
      $thisLabel.remove(); 
     } 
    }); 
} 

JSFiddle