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

Question

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

来自:

到

我试过这个背景颜色:

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'。

Fiddle Demo

希望大家帮助我，如果需要更多信息请询问。

Answer 1

正如@Liarez 所说，您不能通过 highcharts API 做您想做的事。

但是你可以使用 jquery 来做你想做的事情:

添加新按钮:

<div id="legend">
<a href="#" id="a1">CPM</a>

<a href="#" id="a2">IPMS</a>

<a href="#" id="a3">SPEND</a>

</div>

添加样式来自定义它们:

#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 效果。

FIDDLE