Как использовать 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') 
    }) 
} 

, но он не позволяет мне изменить текст ссылки, и не такие вещи, как влияет на цвет парения, и т.д., которые я хотел бы делать. Кроме того, я бы хотел, чтобы гибкость выполняла такие вещи, как добавление заголовков для каждой категории имен фильтров, как показано на рисунке ниже.

Есть ли способ, чтобы сделать что-то добавить в JavaScript, а затем каким-то образом в HTML тело, чтобы сделать что-то вроде этого .... (при нажатии на нее, она переключает фильтр в легенде)

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

Answer 1

Highcharts имеет довольно мощный API-интерфейс javascript, и вы можете с ним многое сделать. Однако код выше делает именно то, что вам нужно, вам просто нужно немного его улучшить. Посмотрите на другой (я думаю, что немного более продвинутый) пример:

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

Как вы можете видеть, легенда оказывается отдельно, и мы просто привязать его к Highcharts, сохраняя идентификаторы серии в атрибуте «data-id».

Здесь вы найдете рабочую демо-версию: http://jsfiddle.net/bk7Au/