AngularJS Gauge js wie auf Winkelkomponente setzen

Question

I Winkelmesser js in meiner Anwendung mit Winkel component..but versucht haben, es nicht funktioniert ...

Das Messgerät char ist https://www.amcharts.com/demos/animated-gauge/

Mein Code ist unten :

(function(app) { 
    'use strict'; 
    SpeedometerController.$inject = ['$scope', '$timeout','$http', 'apiurl']; 
    function SpeedometerController($scope, $timeout,$http, apiurl) { 

     var initChart = function() { 


      $scope.amChartOptions = { 
       "type": "gauge", 
      // "theme": "none", 
       "axes": [ { 
       "axisThickness": 0, 
       "axisAlpha": 0.2, 
       "tickAlpha": 0.2, 
       "valueInterval": 500, 
       "inside": false, 
       "fontSize": 11, 
       // "labelOffset": -50, 
       "gridInside": true, 
       "startAngle": -90, 
       "endAngle": 90, 
       "bands": [ { 
        "color": "#91c039", 
        "endValue": 500, 
        "innerRadius": "78%", 
        "startValue": 0 
       }, { 
        "color": "#f0cf1b", 
        "endValue": 1000, 
        "innerRadius": "88%", 
        "startValue": 500 
       },{ 
        "color": "#de7c13", 
        "endValue": 1500, 
        "innerRadius": "88%", 
        "startValue": 1000 
       }, { 
        "color": "#c53020", 
        "endValue": 2000, 
        "innerRadius": "88%", 
        "startValue": 1500 
       } ], 
       "topText": "497", 
       "topTextYOffset": 105, 
       "topTextColor": "#555555", 
       "topTextFontSize": 50, 
       "bottomText": "Watts", 
       "bottomTextYOffset": -10, 
       "bottomTextColor": "#909090", 
       "bottomTextFontSize": 18, 
       "endValue": 2000 
       } ], 
       "arrows": [ 
       { 
        "startWidth" : 15, 
        "nailBorderThickness" : 1, 
        "nailRadius" : 8 , 
        "color" : "#5b5b5b", 
       } 
       ], 
       "export": { 
       "enabled": true 
       } 
      }; 
     };  
      initChart(); 

     AmCharts.ready(function() { 
      initChart(); 
     }); 
    } 
    app.module('app').component('speedometer', { 
     templateUrl: '../resources/views/component/speedometer.html', 
     controller: SpeedometerController 
    }); 
})(window.angular); 

<div id="speeda_meter"></div> 

Was ist daran falsch?

Answer 1

Es ist besser, die Bibliothek zu verwenden, die mit Winkel als eine Basis mit jeder Winkelanwendung gebaut wird. Wrapping jQuery in eckigen sollte als letzte Option betrachtet werden. Falls Sie offen sind, ein anderes Messgerät zu testen, habe ich eine Open-Source-Gauge-Direktivenbibliothek für Angular JS-Apps, Angular Gauge, veröffentlicht. Checkout, wenn es Ihrem Zweck dient.