0
角度ジェスチャを使用してcanvasjsで動的データを表示する方法。私はAPIからデータを取得し、グラフに表示したい私は値を取得し、静的変数の代わりに変数 "ValueinCm"に格納されているchart.imのyポイントに変数を割り当てる方法を知らない動的値を割り当てる必要があります。anglejsを使用してcanvasjsチャートで動的値を割り当てる方法
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var filledValue;
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope, $http) {
$http.get('https://example.com', {
headers: { 'Authorization': 'Basic password==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
$scope.decodedFrameNew = $scope.decodedFrame.substring(4);
$scope.distanceinFeet = $scope.decodedFrameNew * 12.5*2.54;
$scope.Value = $scope.distanceinFeet/148;
$scope.ValueinCm = $scope.Value.toFixed(2);
filledValue = $scope.ValueinCm;
console.log(filledValue);
});
});
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title: {
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: filledValue },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div id="chartContainer" style="height: 300px; width: 100%;"></div></div>
</body>