범례에 영향을 미치는 html 방법 사용 방법 - highcharts/highslide

Question

차트의 필터에 영향을 줄 수 있도록 페이지 본문에 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') 
    }) 
} 

하지만 내가하고자하는 호버 색상 등에 영향을 미칠처럼 나를 링크의 텍스트를 편집하거나 일을 할 수 없습니다 해야 할 것. 또한 아래 그림과 같이 각 범주의 필터 이름에 헤더를 추가하는 등의 작업을 유연하게 수행하고 싶습니다. 당신이 그것을 클릭하면

자바 스크립트에서 뭔가를 추가 할 수있는 방법이 있나요, 그리고 어떻게 든 이런 일을 할 수있는 HTML 본문은 .... (이 전설에 필터를 전환)

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

Answer 1

하이 차트에는 매우 강력한 자바 스크립트 API가 있으며, 실제로 많은 것을 할 수 있습니다. 그러나 위의 코드는 필요한 것만 정확하게 수행합니다. 조금 향상시켜야합니다. 예를 들어 (내가 좀 더 진보 된 생각) 다른 살펴 보자 : 당신이 볼 수 있듯이

<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> 

는 전설이 별도로 렌더링 우리는 단지에 바인딩 : 여기

$(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입니다 시리즈 ID를 "data-id"속성에 저장하여 Highcharts.

여기에서 유용한 데모를 찾을 수 있습니다. http://jsfiddle.net/bk7Au/