如何在laravel中使用chart.js生成动态条形图？

Question

我想在php laravel框架中生成一个动态条形图,我有贷款&付款，每个用户都有其贷款和付款，下面是数据库的位置 Loan_tbl.id=payments_tbl.id

贷款_tbl

  id  installment_value    fees  total_amount  remain_amount  paid_amount  remain_payments_duration  start_date  end_date             created_at           updated_at  approved_date  
------  -----------------  ------  ------------  -------------  -----------  ------------------------  ----------  ----------  -------------------  -------------------  ---------------
  3754              35.33   12.00        212.00          70.68       141.32                         2  2020-01-01  2020-07-01  2020-06-04 15:09:30  2020-06-04 15:13:56  2020-06-04     
  3755              53.00   18.00        324.00         218.00       106.00                         4  2020-03-01  2020-11-01  2020-06-04 15:10:27  2020-06-04 15:15:29  2020-06-04     
  3756              70.67   24.00        424.00           0.00       424.00                         0  2020-06-01  2020-12-01  2020-06-04 15:10:37  2020-06-04 15:16:18  2020-06-04     

支付_tbl

  id  amount  due_date    payment_date  paid_amount  payment_method  status  loan_id           created_at           updated_at  
------  ------  ----------  ------------  -----------  --------------  ------  -------  -------------------  ---------------------
 77704   35.33  2020-01-01  2020-01-04          35.33               1       4     3754  2020-06-04 15:11:21    2020-06-04 15:13:51
 77705   35.33  2020-02-01  2020-02-04          35.33               1       4     3754  2020-06-04 15:11:21    2020-06-04 15:13:52
 77706   35.33  2020-03-01  2020-03-04          35.33               1       4     3754  2020-06-04 15:11:21    2020-06-04 15:13:53
 77707   35.33  2020-04-01  2020-04-04          35.33               1       4     3754  2020-06-04 15:11:21    2020-06-04 15:13:56
 77708   35.33  2020-05-01  2020-05-01         (NULL)               1       2     3754  2020-06-04 15:11:21    2020-06-04 15:11:21
 77709   35.33  2020-06-01  2020-06-01         (NULL)               1       2     3754  2020-06-04 15:11:21    2020-06-04 15:11:21
 77710    0.00  2020-03-01  2020-03-01         (NULL)               1       5     3755  2020-06-04 15:11:32    2020-06-04 15:15:05
 77711    0.00  2020-04-01  2020-04-01         (NULL)               1       5     3755  2020-06-04 15:11:32    2020-06-04 15:14:46
 77712   53.00  2020-05-01  2020-05-04          53.00               1       4     3755  2020-06-04 15:11:32    2020-06-04 15:15:28
 77713   53.00  2020-06-01  2020-06-04          53.00               1       4     3755  2020-06-04 15:11:32    2020-06-04 15:15:29
 77714   53.00  2020-07-01  2020-07-01         (NULL)               1       2     3755  2020-06-04 15:11:32    2020-06-04 15:11:32
 77715   53.00  2020-08-01  2020-08-01         (NULL)               1       2     3755  2020-06-04 15:11:32    2020-06-04 15:11:32
 77716   70.67  2020-06-01  2020-06-04          70.67               1       4     3756  2020-06-04 15:11:39    2020-06-04 15:15:56
 77717   70.67  2020-07-01  2020-07-04         353.35               1       6     3756  2020-06-04 15:11:39    2020-06-04 15:16:18
 77718   70.67  2020-08-01  2020-08-01           0.00               1       6     3756  2020-06-04 15:11:39    2020-06-04 15:16:17
 77719   70.67  2020-09-01  2020-09-01           0.00               1       6     3756  2020-06-04 15:11:39    2020-06-04 15:16:17
 77720   70.67  2020-10-01  2020-10-01           0.00               1       6     3756  2020-06-04 15:11:39    2020-06-04 15:16:18
 77721   70.67  2020-11-01  2020-11-01           0.00               1       6     3756  2020-06-04 15:11:39    2020-06-04 15:16:18
 77722   53.00  2020-09-01  2020-09-01         (NULL)               1       2     3755  2020-06-04 15:14:46    2020-06-04 15:15:05
 77723   59.00  2020-10-01  2020-10-01         (NULL)               1       2     3755  2020-06-04 15:15:05    2020-06-04 15:15:05

我用来获取贷款与付款的查询如下。

SELECT l.id,l.`borrower_id`,l.`start_date`,l.`total_amount`,l.`remain_amount`,
l.`paid_amount`,p.payment_date,p.paid_amount,p.id, 
l.end_date,l.created_at, l.updated_at FROM loans l JOIN
payments p ON l.id=p.loan_id 

我应用了各种逻辑，但都没有成功，下面是js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
var data = new Array();
    var labels = new Array();
    var payments = new Array();

    @foreach($loan_data as $loan)
      labels.push(new Date("{{$loan->start_date}}").toLocaleDateString('zh-Hans-CN'));
      data.push('{{$loan->total_amount}}');
      payments.push('{{$loan->remain_amount}}');
    @endforeach
    renderChart(data, labels,payments);

    function renderChart(data, labels,payments) {
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Loan Amt',
                    data:  data,
                    backgroundColor: '#26aaff',
                  //   borderColor: "rgba(0,114,188,1)",
                    borderWidth: 4,
                },{
                  label: "Remain AMt",
                  backgroundColor: "#4ddec1",
                  // borderColor: "blue",
                  borderWidth: 1,
                  data: payments
                  }
               ],
            },
            options: {
               scales: {
                    xAxes: [{
                        barPercentage: 0.4
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0 
                    }
                }
            },
        });
    }

我想要的预期输出在下面的图片中，更多参考图片。

我想用下面的顺序来表示 1 Bar=>Loan 1, 2nd Bar=> Loan1-Payments1, 3rd Bar=>Loan1-Payments2, 4th Bar=>Loan1 Remaining + Loan2, 5thBar=> 4thbar - Loan1 Payments3......等等。

Plz help me out with this graph.

Answer 1

从我看到的情况来看，在你的函数中，你是将每个数据集的数据作为一个参数来传递的。相反，修改你的后台，以获取所有数据集的数据，看起来像。

{
  "Loans": [2],
  "Payments": [3]
  ...
}

我在JS中添加了一个函数来为我的图表设置相应的数据。

function getChartData(data) {
let chartData = {
    labels: ["# of records"], // on your case this is enough
    datasets: []
};
Object.keys(data).forEach(function(label, index) {
    chartData.datasets.push({
        label: label,
        data: Object.values(data[label]),
        borderColor: colors[index]
    });
});

return chartData;
}

colors 就是一个带有十六进制颜色字符串的数组，你喜欢多少就有多少。我已经创建了一个函数来生成一个随机的颜色，如果数据集变得太多。

然后当我创建我的图表时，我只需将该函数的结果传递给 data 的图表。

你必须根据你的后台来修改。检查 这个 小提琴