Highstock / Highcharts - yAxis标签顶部 [英] Highstock/Highcharts - yAxis Label top

问题描述

使用Highstock或Highcharts，我希望我的yAxis标签在顶部。我不想要的是在图表的左边界和网格线的起点之间有一个不同的边距。

如果你看看下面的小提琴：

解决方案

我认为您可以使用text-anchor属性设计你的标题。在这里您可以找到更多关于text-anchor属性的信息： https ：//developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

  title：{
 align：'high'，
 text：'Rainfall（mm）'，
 style：{
'text-anchor'：'start'
 $，
 rotation：0，
y：-10，
x：-25 
}，
  

我认为你也需要使用chart.marginLeft参数。它将使您有机会为图表设置特定的左边距。在这里你可以找到关于它的信息。
http://api.highcharts.com/highcharts#chart.marginLeft

您也可以使用xAxis.labels.reserveSpace参数关闭为标签预留空间： http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace

可以找到实时示例，了解您的图表如何使用此选项：
http://jsfiddle.net/Ljwp7694/

亲切的问候，

Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.

If you take a look at the following fiddle: JSFiddle

Relevant part is:

yAxis: {
    title: {
        align: 'high',
        offset: 0,
        text: 'Rainfall (mm)',
        rotation: 0,
        y: -10
    }
}

This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.

Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?

Screenshot, left part is wrong, right part is correct:

解决方案

I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

  title: {
    align: 'high',
    text: 'Rainfall (mm)',
    style: {
      'text-anchor': 'start'
    },
    rotation: 0,
    y: -10,
    x: -25
  },

I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it. http://api.highcharts.com/highcharts#chart.marginLeft

You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace

Here you can find live example how your chart can work with this options: http://jsfiddle.net/Ljwp7694/

Kind regards,

这篇关于Highstock / Highcharts - yAxis标签顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！