PHP到JSON到chart.js
[英]php to json to chart.js
问题描述
我一直在尝试将该脚本传递给JSON的PHP循环（我想我已经弄清楚了。然后使用JSON结果通过chart.js生成折线图。
我尝试传递到图表的JSON脚本。
<?php 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> 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; 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'], } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, elements: { line: { fill: false } } } }); </script> </body>
1 个解决方案
解决方案1
0 已采纳 2017-04-17 12:40:04
这是使用ChartJS中的JSON结果生成折线图的方法
// 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>
Chart.js，PHP和JSON循环问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.