Question

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

FROM：

enter image description here

TO

enter image description here

我尝试过这种背景颜色：

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");
});

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

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

FIDDLE

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

1 个答案: