Estou com um problema ao gerar gráficos utilizando o ChartJS e o AngularJS. Ao carregar os dados de uma api X eu recebo um array de objetos que contém os dados necessários para gerar uma serie de gráficos segue a baixo um modelo do objeto
{
0: {total: 100.00, valores: {10, 20, 5 , ...,X},
1: {total: 350.00, valores: {50, 110, 80, ...,X},
2: {total: 50.00, valores: {10, 4, 2, ...,X}
}
Os objetos recebidos são compostos por duas propriedades total e valor, sendo total um campo que representa a soma de todos os valores que estão dentro do array 'Valores'. Utilizando o ChatJs estou tentando gerar um gráfico do tipo line para cada objeto da requisição, o gráfico deve apresentar a variação do variação do campo valores. Já estou utilizando a bilioteca AnglesJs para apresentar o gráfico mas o problema é que ele não ficou dinâmico apenas o grafico do primeiro objeto é apresentado em todas as interações do ng-repeat. Segue a baixo a representação do meu html e do meu js
function carregarChart() {
meuServico.CarregarDados($stateParams.Id).then(function (result) {
$scope.demonstrativo = result.data;
var grafico = {};
for (var i = 0; i < result.data.length; i++) {
grafico = {
datasets: [
{
fillColor: #333,
strokeColor: #999,
pointColor: #999,
pointStrokeColor: #999,
data: result.data[i].valores
}
]
};
$scope.demonstrativo.grafico = grafico;
}
}
HTML
<div class="col-lg-3" ng-repeat="item in demonstrativo">
<canvas linechart options="opicoesDoGrafico" data="item.grafico" responsive="true" legend="false">
</canvas>
Como eu posso gerar um gráfico para cada item no demonstrativo utilizando os dados informados anteriormente?
Agradeço desde já.