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 } }) ;
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
Post a Comment