如何使用影响了传奇的HTML方法 - highcharts/highslide

我想用HTML页面的身体能够影响图表的过滤器。我的图表图例稍作修改以便能够以不同的方式处理过滤（倒置），所以我希望这种行为保持不变。如何使用影响了传奇的HTML方法 - highcharts/highslide

我发现，做了这样的一个例子...

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') 
    }) 
}

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

enter image description here

有没有办法在JavaScript中执行添加的东西，然后在html身体做这样的事情不知怎么....（当你点击它，就会切换过滤器的传说）

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

来源

2013-04-08 D3Chiq

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>

正如你所看到的，传说是单独渲染，我们只是把它绑定到通过在“data-id”属性中存储系列id来实现Highcharts。

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

来源

2013-04-15 12:08:21 slawekkolodziej

如何使用影响了传奇的HTML方法 - highcharts/highslide

回答

相关问题