2

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á.

1 Resposta 1

1

Não tenho muita noção do que você precisa gerar, mas olhando o exemplo de código que você postou, imagino que seja algo assim:

function carregarChart() {
    meuServico.CarregarDados($stateParams.Id).then(function (result) {

        var datasetsArray = []

        for (var i = 0; i < result.data.length; i++) {

            datasetsArray.push({
                fillColor: '#333',
                strokeColor: '#999',
                pointColor: '#999',
                pointStrokeColor: '#999',
                data: result.data[i].valores
            });

        };

        var grafico = {
            datasets: datasetsArray
        };

        $scope.demonstrativo.grafico = grafico;

    });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .