Javascript 将highcharts图例移到图表容器外

我正在尝试将highcharts legend移动到图表容器外部，当我浏览了获得此链接的选项后，是否可以在回调时创建图例，或使用任何其他选项将图例移动到外部？

您也可以使用少量CSS来完成这些参数

legend.x

和

legend.y

-

CSS

Javascript

...

legend:{
    verticalAlign:'top',
    x:-300,
    y:-100
},
...

---

您可以使用

图表.events.load

事件函数在图表加载后创建图例。这应该没有问题，但这里有一个小原型，它展示了如何实现它：

Highcharts.chart（'container'{
图表：{
活动：{
加载（）{
var seriesOneBtn=document.getElementById（'s1'）
var seriesTwoBtn=document.getElementById（'s2'）
var图表=此
var SerieOne=图表系列[0]
var seriesTwo=图表系列[1]
seriesOneBtn.onclick=函数（）{
SerieOne[serieOne.visible？'hide'：'show']（）
}
seriesTwoBtn.onclick=函数（）{
seriesTwo[seriesTwo.visible？'hide'：'show']（）
}
}
}
},
图例：{
已启用：false
},
系列：[{
数据：[1,2,3]
}, {
数据：[3,2,1]
}]
})

#容器{
宽度：100%；
高度：400px；
边框：1个实心番茄；
}
#传奇{
宽度：150px；
保证金：0自动；
边框：1份纯番茄
}

系列1
系列2

我在那里找不到legend容器fiddle@Aarthi，它位于图表下方，现在我更新了小提琴，使其显示在图表上方。这是用于将图例移到外部还是用于从外部控制系列？您不能将图例移到外部，因为它是Highcharts的一部分，但您可以定义自己的图例，它将具有与Highcharts one相同的功能。

...

legend:{
    verticalAlign:'top',
    x:-300,
    y:-100
},
...