Highcharts Y轴水平标题

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/

试着改变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" 
     ] 
    } 
    }); 
});