高图中的轴标签对齐答案

【问题标题】：Axis Label Alignment in highcharts高图中的轴标签对齐
【发布时间】：2014-01-17 08:04:05
【问题描述】：

我在设置 xAxis 标签的对齐方式以使其看起来正常时遇到问题。第一个和最后一个标签的位置未与 Axis 极值对齐，而是移到了图表区域本身之外。

我尝试了很多方法，例如将溢出设置为 Justify 并尝试定位标签，但在 highcharts 中，可以将对齐或 x 位置等设置应用于所有标签。如果只有一种方法可以实际将第一个和最后一个标签分别对齐到左侧，另一个对齐到右侧，那将是完美的。这是 JSfiddle：

labels: {
            step: 11,
            maxStaggerLines : 1
        }

jsfiddle code

附言。 :为了只显示第一个和最后一个标签，我使用了步骤。

有什么建议吗？

【问题讨论】：

你有截图或代码说明你的问题吗？

标签： javascript highcharts

【解决方案1】：

有几种方法可以解决它：

将marginRight 设置得更高，例如设置为25px
为标签设置width，这样它们就会被包裹起来

一般来说，在使用基于日期的数据时，我建议使用datetime xAxis。创建类别而不是处理.. 类别，如水果、汽车等。例如，我建议使用：http://jsfiddle.net/32cWY/

【讨论】：

问题是，我们根据某些标准更改标签，我们不使用原始日期时间。因此我们需要使用类别。
还在你的 jsfiddle 中，第一个标签超出了 yAxis 的边界。第一个标签应该从原点开始，而不是从它左边的几个像素开始。

【解决方案2】：

 chart: {
         type: 'column',
         marginRight:110
        },

【讨论】：

谢谢。这是帮助我得到我正在寻找的答案的唯一提示。我被要求使 yAxis 标签左对齐。图表：{marginLeft：80}，yAxis：{标签：{对齐：'left'，x：-78}}

【解决方案3】：

一般情况下，您可以使用overflow: 'justify' 来处理 x 轴上的溢出标签，如本示例所示（来自 github repo https://github.com/highslide-software/highcharts.com）

$(function() {
  $('#container').highcharts({
    chart: {
      plotBorderWidth: 1
    },

    title: {
      text: null
    },

    xAxis: [{
      type: 'datetime',
      labels: {
        overflow: 'justify'
      },
      title: {
        text: 'Justified labels'
      }
    }, {
      type: 'datetime',
      linkedTo: 0,
      opposite: true,
      title: {
        text: 'Non-justified labels'
      }
    }],



    yAxis: {
      title: {
        text: null
      },
      labels: {
        enabled: false
      }
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
      pointStart: (new Date()).setUTCHours(0),
      pointInterval: 24 * 3600 * 1000,
      showInLegend: false
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; width: 500px"></div>

这里的问题是overflow: 'justify' 与step 指令结合使用时似乎不起作用（我尝试将step: 6 添加到上述小提琴中并且遇到了与您相同的问题）。我将通过创建等于步数+1（或步数=标签数减1）的标签数来使用解决方法。

另一种适用于所有情况的解决方案是添加rotation: 90，如图所示here。

$(function() {
  $('#container').highcharts({
    chart: {},
    xAxis: {
      categories: ['Jan 2 2013', 'Jan 3 2013', 'Jan 4 2013', 'Jan 5 2013', 'Jan 6 2013', 'Jan 7 2013', 'Jan 8 2013', 'Jan 9 2013',
        'Jan 10 2013', 'Jan 11 2013', 'Jan 12 2013', 'Jan 13 2013'
      ],
      labels: {
        step: 11,
        maxStaggerLines: 1,
        rotation: 90
      }
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 234.4, 134.5, 160.4, 134.6, 154.3]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

【讨论】：

rotation 90 是不可能的，因为我们有 UI 设计。是的，不幸的是，overflow justify 不适用于步骤。我想知道是否扩展 highcharts，获取 Axis 位置，然后单独重新对齐标签可能是一种选择..