yAxis와 데이터 사이의 간격을 제거하는 방법은 무엇입니까?

Question

기존 디자인과 일치하도록 하이 차트의 스타일을 지정 중입니다. 그러나 나는 yAxis와 데이터 시작 사이에 간격을두고 있습니다. 예제보기 : http://jsfiddle.net/MDGkd/

yAxis에서 xAxis를 시작하려면 어떻게해야합니까?

var colors = ['#77217b', '#9c50b1', '#e1d0e6', '#f5f0f7', '#f1e9f4']; 

$(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'area', 
      marginLeft: 80, 
      marginBottom: 80 
     }, 
     colors: colors, 
     legend: { 
      borderRadius: 0, 
      borderWidth: 0, 
      itemStyle: { 
       fontFamily: 'Helvetica', 
       color: '#000000', 
       fontSize: '16px' 
      } 
     }, 
     title: { 
      text: 'Historic and Estimated Worldwide Population Distribution by Region', 
      style: { 
       fontFamily: 'Helvetica', 
       color: '#000000', 
       fontWeight: 'bold', 
       fontSize: '20px' 
      }, 
      margin: 45 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org', 
      style: { 
       fontFamily: 'Helvetica', 
       color: '#000000', 
       fontSize: '16px' 
      }, 
      y: 40 
     }, 
     xAxis: { 
      startOnTick: true, 
      min: 0, 
      max: 6, 
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], 
      lineColor: '#000000', 
      tickmarkPlacement: 'on', 
      tickLength: 14, 
      tickWidth: 1, 
      tickColor: '#000000', 
      title: { 
       enabled: false 
      }, 
      labels: { 
       style: { 
        fontFamily: 'Helvetica', 
        color: '#000000', 
        fontSize: '12px' 
       }, 
       align: 'left', 
       x: -3, 
       y: 26 
      } 
     }, 
     yAxis: { 
      lineColor: '#000000', 
      lineWidth: 1, 
      tickLength: 24, 
      tickWidth: 1, 
      tickColor: '#000000', 
      gridLineWidth: 1, 
      gridLineColor: '#e8d4ec', 
      title: { 
       text: 'Percent', 
       style: { 
        fontFamily: 'Helvetica', 
        color: '#000000' 
       }, 
       x: -40 
      }, 
      labels: { 
       style: { 
        fontFamily: 'Helvetica', 
        color: '#000000', 
        fontSize: '12px' 
       }, 
       align: 'left', 
       x: -24, 
       y: 16 
      } 
     }, 
     tooltip: { 
      backgroundColor: '#000000', 
      borderRadius: 0, 
      borderWidth: 0, 
      shadow: false, 
      style: { 
       fontFamily: 'Helvetica', 
       color: '#ffffff', 
       fontSize: '11px' 
      }, 
      //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', 
      formatter: function() { 
       var s = '<b>' + this.x + '</b>'; 

       $.each(this.points, function (i, point) { 
        s += '<br/>' + point.series.name + ': <b>' + Highcharts.numberFormat(point.percentage, 1) + '%</b> (' + point.y + 'millions)'; 
       }); 

       return s; 
      }, 
      shared: true 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'percent', 
       lineColor: '#8f3ba7', 
       lineWidth: 2, 
       marker: { 
        lineWidth: 0, 
        lineColor: null, 
        fillColor: '#000000', 
        symbol: 'circle' 
       } 
      } 
     }, 
     series: [{ 
      name: 'Asia', 
      data: [502, 635, 809, 947, 1402, 3634, 5268] 
     }, { 
      name: 'Africa', 
      data: [106, 107, 111, 133, 221, 767, 1766] 
     }, { 
      name: 'Europe', 
      data: [163, 203, 276, 408, 547, 729, 628] 
     }, { 
      name: 'America', 
      data: [18, 31, 54, 156, 339, 818, 1201] 
     }] 
    }); 
    $.each(chart.series, function (i, val) { 
     console.log(i, colors[i]); 
     this.legendSymbol.attr('rx', 0); 
     this.legendSymbol.attr('ry', 0); 
     this.legendSymbol.attr('width', 16); 
     this.legendSymbol.attr('height', 16); 
     this.legendSymbol.attr('y', 5); 
     this.legendSymbol.attr('fill', colors[i]); 
    }); 

    console.log(chart); 
}); 

Answer 1

너는 이렇게 보이 길 원해?

는 I는 startOnTick 및 최소 값을 조정함으로써 달성.

xAxis: { 
     startOnTick: false, 
     min: 0.5, 

피들 here.