Question

我试图在Angular JS上显示具有相同数据的图形到HTML。如何将图表传递给HTML

dashboard.js

angular.module('inspinia').controller('dashboardController',['$rootScope','$scope', '$http', function($rootScope, $scope, $http) {
var labels = [];
var Data = [];
var piedata = [];
var completed = 0;
var len=0;
var data = dashboardFactory.getData().success(function(resp){

len = resp.length;
for(var i = 0;i<len;i++)
{
labels.push(resp[i].address);
Data.push(resp[i].value);
piedata.push({"label" :resp[i].address, "value" :resp[i].value })
completed++;
graphload();    
}
});
function graphload()
{
if(completed==len)
{
$scope.labels=labels;
var pieOptions = 
{
segmentShowStroke : false,
animateScale : true
}
var expenses = document.getElementById("expenses").getContext("2d");
new Chart(expenses).Doughnut(piedata, pieOptions);
}
}

使用HTML中的相同代码，我的数据正常工作

var pieData = [
    {
            label :"Value1",
            value : 0.598986,
            color :"#b5b8cf"
    },
    {
            label :"Value2",
            value : 0.41403,
            color : "#a3e1d4"
    },
    {
            label : "Value3",
            value : 2.163101,
            color : "#dedede"
    }
];
var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
}
var expenses = document.getElementById("expenses").getContext("2d");
new Chart(expenses).Doughnut(pieData, pieOptions);
</script>

对于HTML中的这个数据，我的图表显示了值

我的html文件在下面给出

<div class="ibox-title">
<h5>Value</h5>

</div>
<div class="ibox-content">
<div class="text-center">
<canvas id="expenses" height="140"></canvas>
</div>
labels : {{labels}}
</div>

我正在屏幕上打印

标签：[＆＃34; Value1＆＃34;，＆＃34; Value2＆＃34;，＆＃34; Value3＆＃34;]

我认为这意味着我的应用程序正在将数据传递给HTML，但我没有在图表上获取它

先谢谢

Chart.JS不用Angular.JS显示任何内容

0 个答案: