角括弧をJavaScriptに渡す

Question

以下は、グラフを生成するためにJavaScript内で使用したい角の表現{{USA_Visits.maximum.value |number:0 }}です。

<!-- Angular expression --> 

{{USA_Visits.maximum.value |number:0 }} 


<!-- Chart code --> 
<script> 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": {{USA_Visits.maximum.value |number:0 }}, 
     "color": "#FF0F00" 
    }, { 
     "country": "Taiwan", 
     "visits": 500, 
     "color": "#333333" 
    }], 
    "valueAxes": [{ 
     "position": "left", 
     "axisAlpha":0, 
     "gridAlpha":0 
    }], 
    "graphs": [{ 
     "balloonText": "[[category]]: <b>[[value]]</b>", 
     "colorField": "color", 
     "fillAlphas": 0.85, 
     "lineAlpha": 0.1, 
     "type": "column", 
     "topRadius":1, 
     "valueField": "visits" 
    }], 
    "depth3D": 40, 
    "angle": 30, 
    "chartCursor": { 
     "categoryBalloonEnabled": false, 
     "cursorAlpha": 0, 
     "zoomable": false 
    }, 
    "categoryField": "country", 
    "categoryAxis": { 
     "gridPosition": "start", 
     "axisAlpha":0, 
     "gridAlpha":0 

    }, 
    "export": { 
     "enabled": true 
    } 

}, 0); 
</script> 

<!-- HTML --> 
<div id="chartdiv"></div> 

は明らかに機能していませんJSコード内"visits": {{USA_Visits.maximum.value |number:0 }}を割り当てる：これは私の現在のコードです。これどうやってするの？

ありがとうございました

Answer 1

これはどうですか。

<div id="chartdiv"></div> 
<div ng-app="" ng-init="quantity=2000;cost=2"> 
    <p id="usaVal">USA Value: {{ quantity * cost }}</p> // give id as 'usaVal' 
</div> 

とjsの一部

var usaVal = document.getElementById('usaVal'); 

に追加します。

。 console.log(usaVal.innerHTML);を使用して

UPDATE

、それはUSA値：4000」のように印刷されます。

だから、このようにusaValをスライスします。

var usaVal = document.getElementById('usaVal'); 
var val = usaVal.innerHTML; 
val = parseInt(val.slice(val.indexOf(':')+2, val.length)); 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": val, 
    // I want to use {{ quantity * cost }} instead of 4000 
     "color": "#FF0F00" 
    }, 
    .... 
}); 

Answer 2

EDIT2

この最新Fiddle

を参照してください

angular.module('myApp', []); 
 

 
angular 
 
    .module('myApp') 
 
    .controller('stretch',function($scope){ 
 
    \t 
 
    }); 
 

 
    /**Below code will be out of angular context**/ 
 
    angular.element(document).ready(function() { 
 
     var scope = angular.element(document.getElementById('access')).scope(); 
 
\t \t 
 
     var chart = AmCharts.makeChart("chartdiv", { 
 
      "theme": "light", 
 
      "type": "serial", 
 
      "startDuration": 2, 
 
      "dataProvider": [{ 
 
       "country": "USA", 
 
       "visits": scope.quantity*scope.cost, 
 
      // I want to use {{ quantity * cost }} instead of 4000 
 
       "color": "#FF0F00" 
 
      }, { 
 
       "country": "China", 
 
       "visits": 1882, 
 
       "color": "#FF6600" 
 
      }, { 
 
       "country": "Japan", 
 
       "visits": 1809, 
 
       "color": "#FF9E01" 
 
      }, { 
 
       "country": "Germany", 
 
       "visits": 1322, 
 
       "color": "#FCD202" 
 
      }, { 
 
       "country": "UK", 
 
       "visits": 1122, 
 
       "color": "#F8FF01" 
 
      }, { 
 
       "country": "France", 
 
       "visits": 1114, 
 
       "color": "#B0DE09" 
 
      }, { 
 
       "country": "India", 
 
       "visits": 984, 
 
       "color": "#04D215" 
 
      }, { 
 
       "country": "Spain", 
 
       "visits": 711, 
 
       "color": "#0D8ECF" 
 
      }, { 
 
       "country": "Netherlands", 
 
       "visits": 665, 
 
       "color": "#0D52D1" 
 
      }, { 
 
       "country": "Russia", 
 
       "visits": 580, 
 
       "color": "#2A0CD0" 
 
      }, { 
 
       "country": "South Korea", 
 
       "visits": 443, 
 
       "color": "#8A0CCF" 
 
      }, { 
 
       "country": "Canada", 
 
       "visits": 441, 
 
       "color": "#CD0D74" 
 
      }, { 
 
       "country": "Brazil", 
 
       "visits": 395, 
 
       "color": "#754DEB" 
 
      }, { 
 
       "country": "Italy", 
 
       "visits": 386, 
 
       "color": "#DDDDDD" 
 
      }, { 
 
       "country": "Taiwan", 
 
       "visits": 338, 
 
       "color": "#333333" 
 
      }], 
 
      "valueAxes": [{ 
 
       "position": "left", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 
      }], 
 
      "graphs": [{ 
 
       "balloonText": "[[category]]: <b>[[value]]</b>", 
 
       "colorField": "color", 
 
       "fillAlphas": 0.85, 
 
       "lineAlpha": 0.1, 
 
       "type": "column", 
 
       "topRadius":1, 
 
       "valueField": "visits" 
 
      }], 
 
      "depth3D": 40, 
 
      "angle": 30, 
 
      "chartCursor": { 
 
       "categoryBalloonEnabled": false, 
 
       "cursorAlpha": 0, 
 
       "zoomable": false 
 
      }, 
 
      "categoryField": "country", 
 
      "categoryAxis": { 
 
       "gridPosition": "start", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 

 
      }, 
 
      "export": { 
 
       "enabled": true 
 
      } 
 

 
     }, 0); 
 
    }); 
 
    
 
    
 

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
} \t \t

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="//code.angularjs.org/1.5.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="stretch" ng-init="quantity=2000;cost=2"> 
 
    {{quantity}} 
 
    <p id="access">USA Value: {{ quantity * cost }}</p> 
 
</div> 
 
<div id="chartdiv"></div>

だけでなく、コードの下に

を実行してください