Highcharts Y轴水平标题


Highcharts Y axis horizontal title

我正在使用 highcharts 创建一个简单的折线图。默认情况下，Y 轴有一个垂直的标题，但我想把它水平放在顶部。

长话短说 - 我被左侧的额外间距卡住了。这就是我定义 Y 轴的方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 文本，看看会发生什么。我可以通过使用负间距Left 来修复它，但是轴标题是动态的，如果可能的话，我更喜欢更好的方法。

这是一个错误还是我错过了什么？

相关讨论

我认为这是一个错误，但对于这种情况，一个简单的解决方法是设置一个左边距。
看这个小提琴的例子：http://jsfiddle.net/zc1Lc5c6/6/

小提琴代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
$(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"
      ]
    }
  });
});