我无法使用json响应来显示动态饼图,使用canvas.min.js和angularjs
我以饼图中的数据点所需的确切形式返回数据(scope.myData与scopes中的数据相同)....但值不显示在饼图...但如果我在var中给相同的json格式并将其分配给数据点它的工作正常(scope.s)...我不明白为什么?我无法使用json响应来显示动态饼图,使用canvas.min.js和angularjs
<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Tutorial</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script>
var app = angular.module('myapp',[ ]);
app.controller('HelloWorldController', function($scope, $http){
var res = $http.get('http://localhost:8088/api/user/');
res.success(function(data, status, headers, config) {
$scope.myData = data;
});
res.error(function(data, status, headers, config) {
alert("failure message: " + JSON.stringify({data: data}));
});
$scope.s= [{"y":1,"legendText":"DB
check","label":"DB","color":"green"},{"y":1,"legendText":"F
check","label":"Folder","color":"red"}]
$scope.chart1 = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Statistics of health check "
},
animationEnabled: true,
legend:{
verticalAlign: "center",
horizontalAlign: "left",
fontSize: 20,
fontFamily: "Helvetica"
},
theme: "theme2",
data: [
{
type: "pie",
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 20,
indexLabel: "{label} {y}%",
startAngle:-20,
showInLegend: true,
toolTipContent:"{legendText} {y}%",
dataPoints:$scope.myData //This is where problem lies
}
]
});
$scope.chart1.render();
});
</script>
<script type="text/javascript"
src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body data-ng-controller="HelloWorldController">
<h1>You selected:
{{myData}}
</h1>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
您创建了显式对象并传递给new CanvasJS.Chart
。
不要使用myData
,更新所有的图表选项和重新渲染:
阂:$scope.chart1 = new CanvasJS.Chart("chartContainer",$scope.options);
和(虚拟数据):
$scope.options.data[0].dataPoints = [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
];
$scope.chart1.render();
这里的工作演示:
代码
var app = angular.module('myapp',[ ]);
app.controller('HelloWorldController', function($scope, $http){
var res = $http.get('http://localhost:8088/api/user/');
res.success(function(data, status, headers, config) {
// your code
});
res.error(function(data, status, headers, config) {
// fore testing I just use error callback to render async
$scope.options.data[0].dataPoints = [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
];
$scope.chart1.render();
});
$scope.s= [
{"y":1,"legendText":"DB check","label":"DB","color":"green"},
{"y":1,"legendText":"F check","label":"Folder","color":"red"}];
$scope.options = {
title:{
text: "Statistics of health check "
},
animationEnabled: true,
legend:{
verticalAlign: "center",
horizontalAlign: "left",
fontSize: 20,
fontFamily: "Helvetica"
},
theme: "theme2",
data: [
{
type: "pie",
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 20,
indexLabel: "{label} {y}%",
startAngle:-20,
showInLegend: true,
toolTipContent:"{legendText} {y}%",
dataPoints:[]
}
]
};
$scope.chart1 = new CanvasJS.Chart("chartContainer",$scope.options);
$scope.chart1.render();
});
感谢您的答案......但我认为问题是在响应数据...其打印未定义,当我使用console.log,但是当我使用{{myData}}它的打印确切形式,我想要 – rahul
请发布JSON,你'成功'。你应该写一些像'$ scope.options.data [0] .dataPoints = data;'不要忘记调用'$ scope.chart1.render(); ' –
之后是的,我为console.log($ scope.options.data [0] .dataPoints)打印[]和{{options.data [0] .dataPoints}}打印了相同的内容在$ scope.s – rahul
你可以做'$ scope.myData'及的控制台日志检查什么是它的输出? –
似乎您在图表后获得API响应。你可以把console.log for myData。 – NNR
其打印未定义为console.log – rahul