하이 차트 x 축 레이블이 경계에서 시작하지 않음

Question

현재 하이 차트에 문제가 발생했으며 차트 사용자 지정 경험이있는 사람의 도움을 주셔서 감사합니다.

내가 달성하고자하는 것은 x 축 레이블을 시작하여 그래프 폭의 0 %와 100 %로 끝내는 것입니다. 대신 아래에 첨부 된 스크린 샷에서 볼 수 있듯이 주기적으로 X 축을 따라 간격을두고 배치 된 것처럼 보입니다. (죄송합니다에 대한 품질이 낮은)

JSFiddle이에 Highcharts에 의해 렌더링으로 위의 스크린 샷에서http://jsfiddle.net/8uqyz1o0/

, 나는 OCT (13 첫 번째 레이블을 만들기 위해 노력 해왔다 예), x 축 0 위치에서 시작하십시오. 그러나 스크린 샷에서 볼 수 있듯이 상당량의 공백 채우기가 있습니다.

내가 Highcahrts API 설명서 (http://api.highcharts.com/highcharts)에서 모든 것을 시도했다고 믿어 주시면 감사하겠습니다.

JSFiddle :http://jsfiddle.net/8uqyz1o0/

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="height: 400px; width: 800px"></div> 

JS (jQuery를 의존)

var ChartData = { 
    "chart": { 
     "type": "area", 
      "spacing": [0, 0, 0, 0], 
      "margin": [0, 0, 30, 0], 
      "width": null, 
      "height": null, 
      "backgroundColor": null 
    }, 
     "title": { 
     "text": "" 
    }, 
     "xAxis": { 
     "type": "datetime", 
      "lineWidth": 0, 
      "minPadding": 1, 
      "maxPadding": 0, 
      "tickWidth": 0, 
      "gridLineColor": "#333", 
      "labels": { 
      "style": { 
       "color": "#ccc", 
        "font": "14px Arial, Helvetica, sans-serif" 
      } 
     } 
    }, 
     "yAxis": { 
     "title": { 
      "enabled": false 
     }, 
      "showFirstLabel": true, 
      "showLastLabel": false, 
      "gridLineColor": "rgba(0,0,0,0.2)", 
      "gridZIndex": 20, 
      "labels": { 
      "enabled": true, 
       "x": 10, 
       "y": -10, 
       "align": "left", 
       "distance": 0, 
       "useHTML": true, 
       "zIndex": 0 
     } 
    }, 
     "tooltip": { 
     "shared": true, 
      "useHTML": true, 
      "headerFormat": "", 
      "footerFormat": "", 
      "valueDecimals": 0, 
      "shadow": false, 
      "hideDelay": 200 
    }, 
     "plotOptions": { 
     "area": { 
      "stacking": "normal", 
       "lineWidth": 3, 
       "marker": { 
       "enabled": true, 
        "symbol": "circle", 
        "lineColor": null, 
        "radius": 4, 
        "lineWidth": 2, 
        "fillColor": null, 
        "states": { 
        "hover": { 
         "enabled": true, 
          "radiusPlus": 2, 
          "lineWidthPlus": 0, 
          "lineColor": "#fff" 
        } 
       } 
      } 
     } 
    }, 
     "legend": { 
     "enabled": false 
    }, 
     "series": [{ 
     "name": "Diversified Growth", 
      "portfolioType": 4, 
      "data": [ 
      [1411516800000, 56000], 
      [1411948800000, 56000], 
      [1412553600000, 56000], 
      [1413158400000, 56000], 
      [1413763200000, 56000], 
      [1414368000000, 56000], 
      [1414972800000, 56000], 
      [1415577600000, 56000], 
      [1416182400000, 56000], 
      [1416787200000, 56000], 
      [1417392000000, 56000], 
      [1417996800000, 56000], 
      [1418601600000, 56000], 
      [1419206400000, 56000], 
      [1419379200000, 56000] 
     ], 
      "color": "#60c896", 
      "fillColor": "#2bb673", 
      "marker": { 
      "fillColor": "#2bb673" 
     } 
    }, { 
     "name": "Local Growth", 
      "portfolioType": 1, 
      "data": [ 
      [1411516800000, 40000], 
      [1411948800000, 40000], 
      [1412553600000, 40000], 
      [1413158400000, 40000], 
      [1413763200000, 40000], 
      [1414368000000, 40000], 
      [1414972800000, 40000], 
      [1415577600000, 40000], 
      [1416182400000, 40000], 
      [1416787200000, 40000], 
      [1417392000000, 40000], 
      [1417996800000, 40000], 
      [1418601600000, 40000], 
      [1419206400000, 40000], 
      [1419379200000, 40000] 
     ], 
      "color": "#c3df91", 
      "fillColor": "#afd46c", 
      "marker": { 
      "fillColor": "#afd46c" 
     } 
    }] 
}; 

$("#container").highcharts(ChartData); 

Answer 1

당신은 tickPositioner를 사용하여 위치를 계산할 수 있습니다.

tickPositioner: function() { 
      var positions = [], 
       tick = Math.floor(this.dataMin), 
       increment = Math.ceil((this.dataMax - this.dataMin)/6); 

      for (tick; tick - increment <= this.dataMax; tick += increment) { 
       positions.push(tick); 
      } 
      return positions; 
     }, 

예 : http://jsfiddle.net/8uqyz1o0/5/