Javascript 如何使用html方法影响图例-highcharts/highslide

我想在页面主体中使用html，以便能够影响图表的过滤器。我的图表图例稍作修改，以便能够以不同的方式处理过滤（反转），因此我希望此行为保持不变

我找到了一个这样的例子

function(chart){
    $(chart.series).each(function(i, serie){
        $('<li id="legendlinkstyle" style="color: '+serie.color+'">'+serie.name+'</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend')
    })
}

功能（图表）{
$（图表系列）。每个（功能（i，系列）{
$（“
”+serie.name+”
）。单击（函数（）{
serie.visible？serie.hide（）：serie.show（）；
}).appendTo（“#图例”）
})
}

但它不允许我编辑链接的文本，也不允许我想做的影响悬停颜色等事情。此外，我希望能够灵活地为每个类别的过滤器名称添加标题，如下图所示

有没有一种方法可以在javascript中添加一些东西，然后在html正文中添加一些东西来做类似的事情。。。。（单击时，将切换图例中的过滤器）

---

Highcharts有一个非常强大的javascript API，你可以用它做很多事情。然而，上面的代码正是您所需要的，您只需要稍微改进一下。请看另一个（我认为更高级一点）示例：

以下是相关的HTML：

<div id="container" style="height: 400px; min-width: 600px"></div>

<div id="my-legend">
  <strong>Earnings:</strong>
  <button data-id="earnings-above">above</button>
  <button data-id="earnings-inline">inline</button>
  <button data-id="earnings-below">below</button>
</div>

收益：
在上面
内联
在下面

正如您所看到的，图例是单独呈现的，我们只是通过在“数据id”属性中存储序列id将其绑定到Highcharts

在这里，您可以找到一个有效的演示：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        series: [{
            id: 'earnings-above',
            name: 'above',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            id: 'earnings-inline',
            name: 'inline',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            id: 'earnings-below',
            name: 'below',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    }, function (chart) {

      // bind events to your own custom legend
      $('#my-legend').on('click', 'button', function (e) {
        var el = e.target,
            id = el.getAttribute('data-id'),
            series = chart.get(id);

        series.setVisible(!series.visible);
      });
    });
});

<div id="container" style="height: 400px; min-width: 600px"></div>

<div id="my-legend">
  <strong>Earnings:</strong>
  <button data-id="earnings-above">above</button>
  <button data-id="earnings-inline">inline</button>
  <button data-id="earnings-below">below</button>
</div>