Highchart в директиве angularJS

Question

Я обертываю highchart в директиве angularJS, и я пытаюсь добавить кнопку, которая должна отображаться чуть ниже диаграммы. Проблема в том, что кнопки не существует.

HTML:

<div id="container" my-chart style="height: 400px; margin-top: 1em"></div> 

JS:

var app = angular.module('app', []); 
app.directive('myChart', function() { 
    return { 
     restrict: 'A', 
     replace: true, 

     template: '<div><div id="chart"></div><div><button id="btn">Click</button></div><div>', 
     link: function (scope, elem, attrs) { 
      elem.highcharts({ 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 

       series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
       }] 

      }); 
     } 
    } 
}); 

смотрите этот JsFiddle, например.

ОБНОВЛЕНИЕ: Это фиксированный JsFiddle после реализации ответа.

Answer 1

Это потому, что вы вызываете элемент .highcharts(), чтобы он удалял все внутри и визуализировал диаграмму внутри. попробуйте использовать шаблон, как это:

<div> 
    <div id="chart"></div> 
    <div><button id="btn">Click</button></div> 
</div> 

, а затем в вызове функции ссылки директивы:

$("#chart").highcharts({}) 

Вместо этого селектора Вы можете использовать то, что когда-либо вид селектора вы хотите. Вы можете поместить класс, а затем вызвать его на дочерний элемент с классом графика как:

$(elem).children(".chart").highcharts({... 

Answer 2

Я думаю, что если вы хотите добавить кнопку в Highcharts образом, может быть, эта скрипка может помочь вам:

fiddle

exporting: { 
     buttons: { 
      customButton: { 
       x: -62, 
       onclick: function() { 
        alert('Clicked'); 
       }, 
       symbol: 'circle' 
      } 
     } 
    }