需要将背景颜色应用于每个图例文本高图

正如我在我的问题中所述，我希望改变我的传奇，如：

从：

至

我试过这个背景颜色：

legend: { backgroundColor: '#CCC', layout: 'horizontal', floating: true, align: 'left', verticalAlign: 'top', x: 60, y: 1, shadow: false, border: 0, borderRadius: 0, borderWidth: 0 }, 

但没有运气你可以看到我必须实现1.背景颜色应用于文本。 2.文本应附加“BY TIME”。

小提琴演示

希望各位帮帮我，请询问是否需要更多信息。

Answer 1

正如@Liarez所说，你无法从highcharts API做你想做的事。

但是你可以使用jquery来完成你想要的：

添加新按钮：

 
 CPM IPMS SPEND  

添加样式以自定义它们：

 #legend { position:absolute; top: 30px; left: 200px; z-index: 99999; background: black; } #legend a { float: left; margin: 5px; text-decoration: none; color: black; font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; padding: 0 5px; } .leg-clicked { color: #CCC !important; } #a1 { background: rgb(87, 188, 0); } #a2 { background: rgb(213, 156, 72); } #a3 { background: rgb(12, 170, 226); } 

这里的诀窍：

CSS：

 .highcharts-legend{display: none;} 

JS：

 $("#a1").click(function () { $('.highcharts-legend-item:nth-child(1)').click(); $(this).toggleClass("leg-clicked"); }); $("#a2").click(function () { $('.highcharts-legend-item:nth-child(2)').click(); $(this).toggleClass("leg-clicked"); }); $("#a3").click(function () { $('.highcharts-legend-item:nth-child(3)').click(); $(this).toggleClass("leg-clicked"); }); 

所以highchart的图例是不可见的，我们的自定义按钮会向图例发送点击。 这当然是绝招，但一切正常。

此外，您可以添加任何您想要的CSS，图像，另一个jquery效果到这个按钮。

小提琴