dprntkxh703029 2017-04-17 01:18
浏览 63
已采纳

php到json到chart.js

I have been working this script trying to pass PHP loop to JSON ( I Think I have this figured out. then using the JSON result to generate a line chart using chart.js.

JSON script that I am trying to pass to chart. 

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

    ?>

Result from echo above:

[{"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}]

Chart Script (Not working): chart shows but is blank. 

  <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>

</div>
  • 写回答

1条回答 默认 最新

  • donglu6805 2017-04-17 12:40
    关注

    Here's how you could generate a line chart using the JSON result in 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>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法，需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入