0

jsreport でカスタム データを使用し、Chart.js を使用していくつかのグラフを作成しようとしています。問題は、カスタム データを使用してグラフを埋める方法がわからないことです。これまでのところ、データとグラフを生成してキャンバス内に配置する関数を使用して非常に大きな json を作成しましたが、ドキュメントが定義されていないため、ハンドルバーを使用して html 内の関数を呼び出すことができません。では、データを使用してグラフを作成し、キャンバス内に表示するにはどうすればよいでしょうか?

PS: 静的データを含むグラフを簡単に表示できますが、作成した json を使用してこれを行いたいと思っています。

私のチャートを作成する私の機能:

function graficoEstiloAdaptado(exame){
    var ctx = document.getElementById('graficoEsquerdo').getContext('2d');

    var total = 280;
    var incentivador = 0;
    var idealizador = 0;
    var detalhista = 0;
    var sociavel = 0;

    for(var i=0;i<exame.respostas.length;i++){
        for(var j=0;j<exame.respostas[i].alternativas.length;j++){
            switch(exame.respostas[i].alternativas[j].categoria){
                case 'Incentivador':
                    incentivador += 4-j;
                    break;
                case 'Idealizador':
                    idealizador += 4-j;
                    break;
                case 'Detalhista':
                    detalhista += 4-j;
                    break;
                case 'Sociável':
                    sociavel += 4-j;
                    break;
            }
        }
    }

    var porcentagens = {
        incentivador: (incentivador/total).toFixed(1),
        idealizador: (idealizador/total).toFixed(1),
        detalhista: (detalhista/total).toFixed(1),
        sociavel: (sociavel/total).toFixed(1)
    };

    var chartEstiloAdaptado = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [porcentagens.incentivador + "%", porcentagens.idealizador + "%", porcentagens.detalhista + "%", porcentagens.sociavel + "%"],
            datasets: [{
                label: "Gráfico I",
                data: [
                   porcentagens.incentivador,
                   porcentagens.idealizador,
                   porcentagens.detalhista,
                   porcentagens.sociavel
                ]
            }]
        },
        options: {
            animation: {
                onComplete: function() {
                    window.JSREPORT_READY_TO_START = true;
                }
            }
        }
    });
}

API を使用してデータを取得したくはありません。好きなようにレポートを構成し、その後 API を使用してデータを取得したいだけです。

4

1 に答える 1