如何使用影響了傳奇的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

回答

相關問題