php to json to chart.js

私はこのスクリプトをJSONに渡そうとしています（これはわかったと思いますが、JSONの結果を使ってchart.jsを使って折れ線グラフを生成します）php to json to chart.js

私はチャートに渡すしようとしています

JSONスクリプト上記エコーから

<?php 
 
\t 
 
\t echo $_SESSION['amort_JSON']; 
 

 
    ?>

結果：

[{"periodic_pmt":"2","principle_balance":416997.37661705,"principle_paid":0,"ttl_principle_paid":1002.6233829502,"interest_paid":0,"ttl_interest_paid":866.83015878773},{"periodic_pmt":3,"principle_balance":416600.29804453,"principle_paid":538.02630958206,"ttl_principle_paid":1540.6496925323,"interest_paid":396.7004612869,"ttl_interest_paid":1263.5306200746},{"periodic_pmt":4,"principle_balance":416203.59758324,"principle_paid":538.40406076641,"ttl_principle_paid":2079.0537532987,"interest_paid":396.32271010256,"ttl_interest_paid":1659.8533301772},{"periodic_pmt":5,"principle_balance":415807.27487314,"principle_paid":538.78145224369,"ttl_principle_paid":2617.8352055424,"interest_paid":395.94531862527,"ttl_interest_paid":2055.7986488025},{"periodic_pmt":6,"principle_balance":415411.32955451,"principle_paid":539.15848435644,"ttl_principle_paid":3156.9936898988,"interest_paid":395.56828651252,"ttl_interest_paid":2451.366935315}]

グラフスクリプト（機能していません）：グラフは表示されますが、空白です。ここで

<body> 
 
    <canvas id="myChart" width="100" height="100"></canvas> 
 
<script> 
 
\t 
 
var amort_array = <?php echo json_encode($_SESSION['amort_JSON']);?>; 
 

 
var data = JSON.parse(amort_array); 
 

 
var periodic_pmt = data.periodic_pmt; 
 

 
var principle_balance = data.principle_balance; 
 
\t 
 

 
var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['periodic_pmt'], 
 
     datasets: [ 
 
      
 
      { 
 
       type: 'line', 
 
       label: 'Line Component', 
 
       data: ['principle_balance'], 
 
      } 
 
     ] 
 
    }, 
 
\t 
 
\t options: { 
 
    scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
      }] 
 
     }, 
 
\t \t elements: { 
 
     line: { 
 
       fill: false 
 
     } 
 
} 
 
    } 
 
}); 
 
</script> 
 
    </body>

出典

2017-04-17 Anonymous

でJSONの結果を使用して折れ線グラフを生成することができる方法だのStackOverflowへようこそ！ [良い質問をするにはどうすればいいですか]を読んでください（https://stackoverflow.com/help/how-to-ask） –

あなたはChartJS

// JSON result 
 
let result = [{ "periodic_pmt": "2", "principle_balance": 416997.37661705, "principle_paid": 0, "ttl_principle_paid": 1002.6233829502, "interest_paid": 0, "ttl_interest_paid": 866.83015878773 }, { "periodic_pmt": 3, "principle_balance": 416600.29804453, "principle_paid": 538.02630958206, "ttl_principle_paid": 1540.6496925323, "interest_paid": 396.7004612869, "ttl_interest_paid": 1263.5306200746 }, { "periodic_pmt": 4, "principle_balance": 416203.59758324, "principle_paid": 538.40406076641, "ttl_principle_paid": 2079.0537532987, "interest_paid": 396.32271010256, "ttl_interest_paid": 1659.8533301772 }, { "periodic_pmt": 5, "principle_balance": 415807.27487314, "principle_paid": 538.78145224369, "ttl_principle_paid": 2617.8352055424, "interest_paid": 395.94531862527, "ttl_interest_paid": 2055.7986488025 }, { "periodic_pmt": 6, "principle_balance": 415411.32955451, "principle_paid": 539.15848435644, "ttl_principle_paid": 3156.9936898988, "interest_paid": 395.56828651252, "ttl_interest_paid": 2451.366935315 }]; 
 

 
let labels = result.map(e => e.periodic_pmt); 
 
let data = result.map(e => e.principle_balance); 
 

 
let ctx = document.getElementById("myChart"); 
 
let myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: labels, 
 
     datasets: [{ 
 
      label: 'Line Component', 
 
      data: data 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
      }] 
 
     }, 
 
     elements: { 
 
      line: { 
 
       fill: false 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart"></canvas>

出典

2017-04-17 12:40:04

答えて

関連する問題