改寫Highcharts後的SVG

我試圖專門定位第一個和最後一個x軸標籤，它們是文本元素，並更改它們的屬性。改寫Highcharts後的SVG

爲了說明這個問題，我試圖將第一個和最後一個x軸標籤保留在Highcharts容器的範圍內。不幸的是，它們正在UI中被切斷。

Highcharts X-Axis Label UI Bug

這是我的配置：

 xAxis: [{ 
      type: 'datetime', 
      showFirstLabel: true, 
      showLastLabel: true, 
      labels: { 
       step: 3, 
      formatter: function(){ 
       return options.labels[this.value]; 
      }, 
       style: { 
        fontSize: '10px', 
        color: '#9c9c9c' 
       }, 
       // x: 5, 
       y: 10 
      }, 
      startOnTick: true, 
      // lineColor: 'transparent', 
      tickLength: 0, 
      minPadding: 0, 
      maxPadding: 0 
     }],

的step關鍵是造成這個我知道。否則，我可以使用overflow:justify，但我想要這一步。於是，我決定改變SVG可能是一個很好的解決方案。它在圖表首次加載時起作用，但在重繪時不起作用。

這是我的「負荷」，我想複製上「重畫」，這解決辦法：

Highcharts.Chart.prototype.callbacks.push(function(chart){ 
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25); 
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813); 
});

來源

2014-11-21 Con Antonakos

當圖表對象完成加載和渲染時，執行回調函數。它沒有調用圖表重繪。請參閱這一個：http://api.highcharts.com/highcharts#Highcharts.Chart – 2014-11-22 07:06:56

您應該配置在您的圖表選項these callbacks。它更清潔：

function moveLabels(){ 
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25); 
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813); 
} 

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

來源

2014-11-23 00:54:44 Mark

偉大的建議。不幸的是，它似乎仍然不起作用。當我在console中記錄moveLabels函數中的'x'屬性時，它肯定發生了變化。但是，與此同時，我可以清楚地看到y軸標籤（第一個和最後一個）的橡皮筋，就好像'x'屬性在第一個時候恢復爲'10'，而當我'重新繪製時，'最後一個標籤'765.0769230769231' 」。在這個改變實施之後重申，'加載'運作良好。 – 2014-11-24 20:47:23

@ConAntonakos，你可以編寫一個例子jsFiddle或Plnkr嗎？ – Mark 2014-11-25 01:02:35

改寫Highcharts後的SVG

回答

相關問題