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],
    }]
    });

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

Answer 2

对于某些寻求更简单替代方法的人，只需使用legend的itemWidth属性即可。

legend:{ itemWidth: 100 }

更新的小提琴： http://jsfiddle.net/3mvpbu1f/

Highcharts如何设置最大图例宽度

2 个答案: