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文字，看看会发生什么。我可以通过使用负距离来修复它，但是轴标题是动态的，如果可能的话我更喜欢更好的方法。

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

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

Highcharts Y轴水平标题

1 个答案: