javascript - Angular JS Amcharts directive -


i've founded directive displaying 1 single chart(amcharts) ..

angular.module("app").directive('myelem',    function () {        return {            restrict: 'e',            replace:true,             template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',            link: function (scope, element, attrs) {                  var chart = false;                  var initchart = function() {                   if (chart) chart.destroy();                   var config = scope.config || {};                    chart = amcharts.makechart("chartdiv", {                 "type": "serial",                 "theme": "light",                 "marginleft": 20,                 "pathtoimages": "http://www.amcharts.com/lib/3/images/",                 "dataprovider": [],                 "valueaxes": [{                     "axisalpha": 0,                     "inside": true,                     "position": "left",                     "ignoreaxiswidth": true                 }]             });                                       };                 initchart();           }//end watch                   }    }) ; 

jsfiddle

now want directive displays of charts taking data source , type. example : <my-directive type="3dcylinder" source="data"></my-directive>

you need accept input in directive using isolated scope:

 scope: {           type: '@',           source: '=',           chartid: '@'        } 

and use scope variables in link function scope.source, scope.type etc.

html

 <my-elem chart-id="chart-1" source="data" type="serial"></my-elem>  <my-elem chart-id="chart-2" source="data1" type="serial"></my-elem>  

check working jsfiddle @ http://jsfiddle.net/lbqjlvlp/6/ (note: have updated angular version 1.5.0)


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -