测试对齐＆＃39;中心＆＃39;到高图传奇的内容

Question

我已经在高潮图上工作了一段时间，我有这样的图表

我将图例放在页面的底部，我需要做的是使图例文本对齐中心，如下图所示

我在高图中发现了很少的文本对齐问题，但没有满足我的要求。所以我无法继续前进。

Fiddle http://jsfiddle.net/AbNpB/12/

提前致谢！

Answer 1

尝试添加以下内容：

   legend: {
        align: 'center',
        verticalAlign: 'bottom',
        x: 0,
        y: 0
    },

希望这有帮助。

Answer 2

可以使用将翻译每个图例项目的自定义代码对齐每一行。

在JSFiddle：http://jsfiddle.net/BlackLabel/a02czac2/

中调整输出窗口的大小更加容易

$(function() {
  (function(H) {
    H.wrap(H.Legend.prototype, 'render', function(proceed) {
      // proceed
      proceed.apply(this, [].slice.call(arguments, 1));

      // custom
      var legend = this,
        centerRow = function(tab, w, x) {
          var offset = (legend.legendWidth - (x + w)) / 2;
          H.each(tab, function(elem) {
            elem.legendGroup.attr({
              translateX: elem.legendGroup.translateX + offset
            });
          });
        }

      if (legend.options.centerItemLines) {
        var items = legend.allItems || [],
          lastY = items[0] && items[0]._legendItemPos[1],
          rowItems = [],
          pos, prevX, prevW;
        H.each(items, function(item) {
          pos = item._legendItemPos;
          if (pos[1] > lastY) {
            lastY = pos[1];
            centerRow(rowItems, prevW, prevX);
            rowItems = [];
          }
          rowItems.push(item);
          prevX = pos[0];
          prevW = item.legendGroup.getBBox(true).width;
        });
        centerRow(rowItems, prevW, prevX); // last line
      }
    });
  }(Highcharts))

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    legend: {
      itemStyle: {
        width: 350
      },

      centerItemLines: true

    },
    series: [{
      data: [6, 4, 2],
      name: 'First'
    }, {
      data: [7, 3, 2],
      name: 'Second a longer legend text and longer and longer and longer'
    }, {
      data: [9, 4, 8],
      name: 'Third'
    }, {
      data: [1, 2, 6],
      name: 'Fourth'
    }, {
      data: [4, 6, 4],
      name: 'Fifth'
    }]
  });
});

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

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