Question

下面我有一个Angular表达式{{USA_Visits.maximum.value |number:0 }}，我想在JavaScript中使用它来生成图表。这是我目前的代码：

<!-- 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

<强> EDIT2

请参阅最新的Fiddle

请在代码下面运行

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('stretch',function($scope){
  	 
  });

  /**Below code will be out of angular context**/
  angular.element(document).ready(function () {
      var scope = angular.element(document.getElementById('access')).scope();
		
       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;
}

<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>

Answer 2

怎么样。

<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 part

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

更新

使用console.log(usaVal.innerHTML);，它会打印出类似于＆＃39; USA Value：4000＆＃39;。

所以你要像这样切片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"
    },
    ....
});

将Angular Expression传递给Javascript

2 个答案: