在highcharts中的传奇项目边框

Question

我知道有很多方法可以在Highcharts中围绕整个传奇绘制边框。如何在Highcharts 5.0中的每个图例项周围绘制边框？

Answer 1

这看起来比我想象的要复杂。我认为有一个可能的解决方案是将useHTML: true添加到legend，然后使用CSS和伪元素进行样式化。

使用useHTML然后你可以使用CSS来设置它的样式：

.highcharts-legend-item {
padding: 1em;
}

.highcharts-legend-item > span {
position: relative;
overflow: visible!important;
}

.highcharts-legend-item > span:after {
content: "";
position: absolute;
width: 110%;
border: 2px solid #ddd;
padding: 1em 1em 0.5em;
top: -2px;
left: -25px;
border-radius: 10px;
}

请参阅此JS Fiddle以获取示例。

我确定你需要调整样式，但它应该是一个开始。

希望这有帮助。

Answer 2

是。 Highcharts有一个标题为Style by CSS的文档，详细说明了如何执行此操作。

看看它，你会想做类似的事情：

.highcharts-legend-item {
  border: 1px solid tomato;
}