Highcharts x 축 날짜 형식 문제

Question

하이 차트로 스택 된 막대를 작성하려고합니다. x 축에 날짜 형식과 관련된 몇 가지 문제가 있습니다. 여기를 참조하십시오 : http://jsfiddle.net/9y2gnnLy/

최소 날짜부터 시작하여 최고로 끝나는 6 개월 간격을 x 축에 추가하고 싶습니다. 또한 도구 설명에서 기간을 계산하려고합니다. 예를 들어 견인 날짜의 차이 : 현재 만료 날짜 - 폐기 날짜 = 기간. X 축에서 폐기 된 날짜에 액세스하려면 어떻게해야합니까?

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     categories: ['Microsoft Office 2010', 'Microsoft Office 2013', 'Microsoft Office 365'] 
    }, 
    yAxis: { 
       type: 'datetime', 
     labels: { 
      formatter: function() { 
       return Highcharts.dateFormat('%b %Y', this.value); 
      }, 
     } 
      }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name +'</b><br/>' + '<b>' + this.x +': </b><br/>'+ 
        Highcharts.dateFormat('%b %Y', 
              new Date(this.y)) + " - " 
       + Highcharts.dateFormat('%b %Y', 
              new Date("Retired Date - How to access the retired date on x axis")) + '<br/><br/><b>Duration: </b>'; 
      } 
    }, 
    plotOptions: { 
     series: { 
      stacking: 'normal' 
     } 
    }, 
    series: [{ 
     name: 'Retired', 
     color: 'rgba(223, 83, 83, .5)', 
     data: [Date.parse("1/2/2013"), Date.parse("2/3/2014"), Date.parse("3/4/2015")], 
     dataLabels: { 
      enabled: true, 
      format: '{series.name}' 
     } 
    }, { 
     name: 'Expiring', 
     data: [Date.parse("1/2/2012"), Date.parse("6/3/2013"), Date.parse("8/4/2014")], 
     dataLabels: { 
      enabled: true, 
      format: "{series.name}" 
     } 
    }, { 
     name: 'Standard', 
     data: [Date.parse("1/2/2011"), Date.parse("5/3/2012"), Date.parse("4/4/2013")], 
     dataLabels: { 
      enabled: true, 
      format: "{series.name}" 
     } 
    }, { 
     name: 'Planning', 
     color: 'rgba(119, 152, 191, .5)', 
     data: [Date.parse("1/2/2010"), Date.parse("9/3/2011"), Date.parse("5/4/2012")], 
     dataLabels: { 
      enabled: true, 
      format: '{series.name}' 
     } 
    }] 
}); 
}); 

this과 (과) 같은 그룹으로 묶을 수 있습니까?

Answer 1

시리즈의 컬럼 범위 유형을 사용할 수 있습니다. 이러한 유형의 시리즈를 사용하면 원하는 차트를 만드는 것이 훨씬 더 간단 해집니다.

막대에 범위를 설정하여 쌓인 것처럼 보이게 할 수 있습니다. 당신은 당신이 정렬 사용하여 막대의 중심에 dataLabels를 이동할 수 있습니다 더 카테고리 수준 http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

series: [{ 
    name: '1', 
    data: [ 
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 02, 01)], 
    [Date.UTC(2011, 01, 02), Date.UTC(2011, 03, 01)], 
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 06, 01)] 
    ], 
    dataLabels: { 
    enabled: true, 
    format: "{series.name}" 
    } 
}, { 
    name: '2', 
    data: [ 
    [Date.UTC(2011, 02, 01), Date.UTC(2011, 03, 01)], 
    [Date.UTC(2011, 03, 01), Date.UTC(2011, 10, 01)], 
    [Date.UTC(2011, 06, 01), Date.UTC(2011, 08, 01)] 
    ], 
    dataLabels: { 
    enabled: true, 
    format: "{series.name}" 
    } 
}] 

를 추가하는 플러그인 그룹화 범주를 사용할 수 있습니다 '센터'있었던 파라미터 : 여기

dataLabels: { 
    enabled: true, 
    align: 'center', 
    formatter: function() { 
    return this.series.name; 
    } 
} 

당신이 볼 수 있습니다 예제 작동 방식 : http://jsfiddle.net/ttrtb6xt/1/