legend - 如何设置最大图例宽度

Question

我有右对齐的图例，我需要给它最大宽度为整个图表容器的 25%。我尝试将宽度设置为 25%，但如果我的系列名称是短图例框仍保持为 25%，但应等于内容宽度。所以我正在寻找 maxWidth 属性（如果存在）。我处于风格模式。这是代码 http://jsfiddle.net/sabira/xmcqjnvg/24/

Highcharts.chart('container', {
        chart: {
        styledMode: true,
    },
    legend: {
        align: 'right',
      layout: 'proximate',
    },
    series: [{
      name: 'very long long long long long name',
      data: [1, 4, 3, 5],
     },
    {
        name: 'short',
        data: [3, 5, 3, 1],
    }]
    });

标签： legend

Answer 1

该legend.maxWidth属性不存在。但是，可以通过在图表加载事件中检查图例宽度并在它大于例如时更新它来实现。图表宽度的“25%”。

代码：

  chart: {
    styledMode: true,
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend,
          legendMaxWidth =
            Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;

        if (legend.legendWidth > legendMaxWidth) {
          legend.update({
            width: legend.options.maxWidth
          });
        }
      }
    }
  }

演示：

• https://jsfiddle.net/BlackLabel/fpwdtghk/

API参考：

• https://api.highcharts.com/class-reference/Highcharts.Legend#update