하이 차트 Y 축 수평 제목

Question

하이 차트를 사용하여 간단한 선형 차트를 만듭니다. 기본적으로 Y 축에는 세로로 제목이 있지만 상단에 가로로 표시하고 싶습니다.

짧은 이야기 - 왼쪽에 여분의 간격이 붙어 있습니다.

yAxis: [{ 
    title: { 
    align: "high", 
    textAlign: "left", 
    rotation: 0, 
    offset: 0, 
    margin: 0, 
    y: -20, 
    x: -15, 
    text: "some long axis title" 
    }, 
    labels: { 
    align: "left", 
    y: -5, 
    x: -15 
    } 
}] 

작업, 예를 들어 바이올린을 참조하십시오 :

http://jsfiddle.net/zc1Lc5c6/3/가 y 축 텍스트를 변경 시도하고 무슨 일이 일어 나는지 내 Y 축을 정의하는 방법이다. 음수로 spacingLeft를 사용하여 문제를 해결할 수 있지만 축 제목이 동적이며 가능한 경우 더 나은 방법을 선호합니다.

버그입니까, 아니면 놓친 것일까 요?

Answer 1

나는 이것이 버그라고 생각하지만이 경우 간단한 해결 방법은 왼쪽 여백을 설정하는 것입니다. 예를 들어이 바이올린을 참조하십시오 http://jsfiddle.net/zc1Lc5c6/6/

바이올린 코드 :

$(function() { 

    $('#container').highcharts({ 
    title: "", 
    chart: { 
     spacing: [5, 5, 5, 5], 
     marginLeft: 32 
    }, 
    legend: { 
     layout: "horizontal", 
     align: "right", 
     verticalAlign: "top", 
     itemDistance: 10, 
     symbolHeight: 8, 
     symbolPadding: 1, 
     padding: 0, 
     margin: 20, 
     itemMarginBottom: 3 
    }, 
    plotOptions: { 
     series: { 
     dataLabels: { 
      enabled: false 
     }, 
     marker: { 
      symbol: "circle", 
      radius: 4, 
      states: { 
      hover: { 
       radiusPlus: 1 
      } 
      } 
     }, 
     showInLegend: true 
     }, 
     line: { 
     states: { 
      hover: { 
      halo: { 
       size: 8 
      } 
      } 
     } 
     } 
    }, 
    series: [{ 
     type: "column", 
     name: "First column", 
     data: [5, 2, 13, 3, 3, 6, 2, 3, 2, 1, 5, 2, 1] 
    }, { 
     type: "line", 
     name: "First line", 
     data: [3, 1, 7, 1, 1, 5, 1, 2, 1, 1, 3, 1, 0], 
     yAxis: 1, 
     showInLegend: false 
    }, { 
     type: "column", 
     name: "Second column", 
     data: [7, 1, 2, 6, 2, 6, 4, 2, 3, 3, 6, 2, 3] 
    }, { 
     type: "line", 
     name: "Second line", 
     data: [3, 0, 2, 3, 1, 3, 2, 2, 3, 1, 3, 2, 2], 
     yAxis: 1, 
     showInLegend: false 
    }], 
    yAxis: [{ 
     visible: true, 
     tickPosition: "inside", 
     offset: 0, 
     title: { 
     text: "# tasks", 
     align: "high", 
     textAlign: "left", 
     rotation: 0, 
     offset: 0, 
     margin: 0, 
     y: -5, 
     x: -7 
     }, 
     labels: { 
     align: "right", 
     y: -5 
     } 
    }, { 
     visible: true, 
     tickPosition: "inside", 
     offset: 0, 
     type: "linear", 
     title: { 
     text: "# completed", 
     align: "high", 
     textAlign: "left", 
     rotation: 0, 
     offset: 0, 
     margin: 0, 
     y: 12, 
     x: -7 
     }, 
     labels: { 
     align: "right", 
     y: 12 
     } 
    }], 
    xAxis: { 
     labels: { 
     y: 16 
     }, 
     categories: [ 
     "2016 W31", 
     "2016 W32", 
     "2016 W33", 
     "2016 W34", 
     "2016 W35", 
     "2016 W36", 
     "2016 W37", 
     "2016 W38", 
     "2016 W39", 
     "2016 W40", 
     "2016 W41", 
     "2016 W42", 
     "2016 W43" 
     ] 
    } 
    }); 
});