Question

我在设置xAxis标签的对齐方式时遇到问题，以便它看起来不错。第一个和最后一个标签的位置没有与Axis极值对齐，而是移动到图表区域之外。

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

labels: {
            step: 11,
            maxStaggerLines : 1
        }

jsfiddle code

PS。：要仅显示第一个和最后一个标签，我使用步骤。

有什么建议吗？

Answer 1

通常，您可以使用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>

Answer 2

有几种方法可以解决它：

将marginRight设置得更高，例如设置为25px
为标签设置width，因此它们将被包装

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

Answer 3

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

高图中的轴标签对齐

3 个答案: