Highcharts Y axis horizontal title

Question

Я использую highcharts для создания простой линейной диаграммы. По умолчанию ось Y имеет название по вертикали, но я хотел бы иметь ее горизонтально сверху.

Короткий длинный рассказ - я застрял с дополнительным интервалом слева. Это, как я определяю мою Ось 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/

Попробуйте изменить YAxis текст и посмотреть, что происходит. Я мог бы исправить это, используя отрицательный spacingLeft, но заголовок оси динамический, и я предпочел бы лучший метод, если это возможно.

Является ли это ошибкой или, может быть, я что-то пропустил?

Answer 1

Я считаю, что это ошибка, но простым обходным путем для этого случая является простое задание левого поля. Смотрите эту скрипку для примера: http://jsfiddle.net/zc1Lc5c6/6/

код Fiddle:

$(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" 
     ] 
    } 
    }); 
});