文章/答案/技术大牛

发布

社区首页 >问答首页 >php到chart.js

问php到chart.js
EN

Stack Overflow用户

提问于 2017-04-17 01:18:11

回答 1查看 989关注 0票数 0

我一直在使用这个脚本，试图将PHP循环传递给JSON (我想我已经解决了这个问题。然后使用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>

php

json

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43443902

复制

相似问题

问php到chart.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问php到chart.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问php到chart.js
EN