Highcharts 图例与图形区域重叠

Question

我正在使用 highcharts 绘制出很多部分的折线图。我希望图例在图形区域的底部是静态的。图形区域的高度可以固定，但图例可以动态更改。

我在图例对象中使用以下选项

legend: {
        
        useHTML: true,
        enabled: true,
        reversed: false,
        verticalAlign: 'bottom',
        floating: true,                              
        align: 'center',
        padding: 10,
        margin: 20,
        itemDistance: 10,
        itemStyle: {
            'font-size': '14px',
            'color': colors.greyDark,
            'font-family': fonts.proximaNovaBold,
            'letter-spacing': '0',
            'line-height': '17px',
            'text-align': 'center',
        },
        itemMarginBottom: 10,
        x: 0,
        y: 100
    },

我已经在小提琴https://jsfiddle.net/x496tLmf/1/ 中复制了它

有什么办法可以解决这个问题，并将图例粘在底部。所有这些都需要显示，因为图形将作为静态图像导出。

Answer 1

图例与图表重叠的主要问题有两个：

1. 当您手动设置图表边距时，图表不会为图例保留空间。
2. 当您启用图例浮动选项时，您明确允许重叠
   API 的图例：https : //api.highcharts.com/highcharts/legend.floating

这里的解决办法是去掉前面提到的属性，让图表计算图例的位置。但是，当您想将此图表导出为包含所有图例项的静态图像时，您必须指定每个元素的大小以及一些溢出样式以将它们剪裁一点。您还可以减少它们之间的间距，以增加图表区域。

legend: {
  useHTML: true,
  enabled: true,
  reversed: false,
  itemWidth:120,
  itemStyle: {
    'font-size': '14px',
    'color': colors.greyDark,
    'font-family': fonts.proximaNovaBold,
    'letter-spacing': '0',
    'line-height': '17px',
    'text-align': 'center',
          "textOverflow": "ellipsis"
  },

},

API：https : //api.highcharts.com/highcharts/legend.itemWidth
现场演示：https : //jsfiddle.net/BlackLabel/ef8rjkmL/