测试对齐“中心”到高图图例内容答案

【问题标题】：Test alignment 'Center' to the highchart legend content测试对齐“中心”到高图图例内容
【发布时间】：2014-11-01 18:44:32
【问题描述】：

我一直在研究highchart，我有这样的图表

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

我在 highchart 中发现了一些文本对齐问题，但不符合我的要求。所以我无法继续前进。

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

提前致谢！

【问题讨论】：

不幸的是，这个选项是不可能的，您只能全局对齐图例，但不能对齐图例中的项目

标签： javascript jquery css highcharts text-alignment

【解决方案1】：

尝试添加这个：

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

希望这会有所帮助。

【讨论】：

我的意思是在图表的定义属性集中。
好吧，您的解决方案不起作用，对齐选项仅居中图例位置，而不是里面的项目。
是的 sebastian 是正确的，它只对齐整个图例位置

【解决方案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>

【讨论】：