0

我想在页面正文中使用 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')
    })
}

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

在此处输入图像描述

有没有办法在javascript中添加一些东西，然后以某种方式在html正文中做这样的事情......（当你点击它时，它会在图例中切换一个过滤器）

<a href="functionhere();">CUSTOMIZE</a>
4

1 回答 1

0

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

$(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);
      });
    });
});

这是相关的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 存储在“data-id”属性中来将其绑定到 Highcharts。

在这里你可以找到一个工作演示：http: //jsfiddle.net/bk7Au/

于 2013-04-15T12:08:21.443 回答