jsreportで自分のチャートのカスタムデータを使用するには？

jsreportでカスタムデータを使用してチャートを作成しようとしていて、Chart.jsを使用していますが、カスタムデータを使用してチャートを埋め込む方法がわかりません。これまでのところ、私はデータと関数を使って非常に大きなjsonを作成し、チャートを生成しキャンバス内に配置しましたが、ドキュメントが定義されていないので、ハンドルバーでHTML内の関数を呼び出すことはできません。では、データを使ってチャートを作成し、それをキャンバス内に表示するにはどうすればよいですか？jsreportで自分のチャートのカスタムデータを使用するには？

P .:私は静的なデータを持つグラフを簡単に表示できますが、実際に作成したjsonを使用してこれを行う必要があります。

My機能は、私のチャートを作成するには：

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を使用してデータを取得します。

出典

2017-07-15 Gustavo Mendonça

主なアイデアは、このblogで説明されています

パラメータ
function toJSON(data) { 
    return JSON.stringify(data); 
} 
からJSON文字列を作るヘルパー関数を定義し、インラインスクリプトで、このヘルパーを呼び出す
<script> 
    var data= {{{toJSON this}}} 
</script> 

chart.jsの完全な例は次のようになりますこの

<html> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js'></script> 
    </head> 
    <body> 

    <canvas id='myChart' style="margin-top:30px"></canvas> 

    <script> 
    var ctx = document.getElementById('myChart').getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
     datasets: [{ 
      label: 'apples', 
      data: {{{toJSON A}}}, 
      backgroundColor: "rgba(153,255,51,0.4)" 
     }, { 
      label: 'oranges', 
      data: {{{toJSON B}}}, 
      backgroundColor: "rgba(255,153,0,0.4)" 
     }] 
     }, 
     options: { 
      animation: { 
       onComplete: function() { 
        // set the PDF printing trigger when the animation is done 
        // to have this working, the phantom-pdf menu in the left must 
        // have the wait for printing trigger option selected 
        window.JSREPORT_READY_TO_START = true 
       } 
      } 
     } 
    }); 
    </script>  
    </body> 
</html>

作業中のデモはhereです。

出典

2017-07-16 08:13:19

ありがとうございました！ –

jsreportで自分のチャートのカスタムデータを使用するには？

答えて

関連する問題