【发布时间】：2017-02-17 08:10:56
【问题描述】：
我想在来自 API 的融合图中显示动态数据。我正在使用融合图表在角度图表中显示值。如何将 JSON 数据分配给图表属性的值字段。我已经解码了数据帧并在控制台日志中获得了“24”之类的值。我需要在融合图表角度图表中显示。
样本数据
{"id":4753666,"timestamp":"2017-02-17","dataFrame":"TEVOOjbb==","fcnt":243,"port":2,"rssi":-113,"snr":-4.19,"sf_used":9,"decrypted":true}
代码
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<script>
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope, $http) {
$http.get('https://example.com', {
headers: { 'Authorization': 'Basic passwordbase64==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
$scope.decodedFrameNew = $scope.decodedFrame.substring(4);
$scope.distanceinFeet = $scope.decodedFrameNew * 11.5*2;
$scope.Value = $scope.distanceinFeet / 148;
$scope.ValueinCm = $scope.Value.toFixed(2);
console.log($scope.ValueinCm )
});
});
var myData = {
"chart": {
"caption": "Bin 1",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#e44a00"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "34"
}]
}
};
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource={{decodedFrame}}></fusioncharts>
</div>
</body>
【问题讨论】：
标签： javascript angularjs json fusioncharts