高图表图例重叠在图形区域上

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. 启用图例浮动选项时，明确允许图例重叠
   neneneba 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/