Highcharts.js : 스택 그래프

Question

의 이상한 렌더링 내 스택 highcharts 그래프와 함께 몇 가지 문제가 있습니다

$('#container').highcharts(
    chart: 
    type: 'column' 
    credits: 
    enabled: false 
    title: 
    text: '' 
    xAxis: 
    lineColor: '#afafaf' 
    lineWidth: 1 
    tickWidth: 0 
    labels: 
     enabled: false 
    opposite: true 
    yAxis: 
    min: 0 
    max: 4 
    gridLineWidth: 0 
    lineWidth: 0 
    labels: 
     enabled: false 
    title: 
     text: '' 
    reversed: true 
    legend: 
    enabled: false 
    tooltip: 
    enabled: false 
    plotOptions: 
    column: 
     borderWidth: 1 
     borderColor: '#FFFFFF' 
     pointPadding: 0 
     groupPadding: 0 
     animation: false 
     stacking: 'normal' 
     dataLabels: 
     enabled: false 
    series: [ 
     color: '#FF0000' # red 
     data: [1,2,3] 
    , 
     color: '#0000FF' # blue 
     data: [0,2,1] 
    ] 
) 

그래프는 (I 픽셀 차이를 보여주기 위해 작은 컨테이너 크기를 선택한) here 바이올린을한다.

1. 파란색 그래프에는 상부 테두리

2. 컨테이너 폭 경우 청색 그래프

   가운데 열이 오른쪽 열에 오버랩 (3N (이 모두 0과 제 시리즈를 삽입하여 고정 할 수) 없다 +1) PX (N 인 정수)

3. 중간 열의 적색 부분이 컨테이너의 높이가 짝수의 픽셀을 갖는 경우, 청색 부분보다 높이가 1 픽셀 작은

,

제 해결 방법은 문제가되는 컨테이너 너비가 응용 프로그램에서 다를 수있는 열 수에 따라 다르기 때문에 특히 (2)에 대해서는 꽤 못 생깁니다.

아이디어가 있으십니까? 이 버그가 highcharts.js에 있습니까? 아니면 하이 차트 구성에서 잘못된 것이 있습니까?

Answer 1

1. 경계는이 문제이다 https://github.com/highslide-software/highcharts.com/issues/2694
2. 의도 된 격자 선 또는 축 라인과 중첩. 우리가 살펴볼 것입니다.
3. 이것은 날카로운 그래픽을 렌더링하기 위해 가장 가까운 전체 픽셀로 반올림 한 결과입니다.
이슈 # 2694 이제 해결