带有 codeigniter 3 的图表栏

Question

我想用图表栏创建一个图表并列出我在数据库中添加的所有新记录并获取添加的月份。

问题是我的应用程序在 php 中，我看到 chart.js 在 javascript 中。

这是我在 index.php 中的图表的 html

<div class="row clearfix">
    <!-- Bar Chart -->
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>GuiaCorretor - Analitycs</h2>
            </div>
            <div class="body">
                <canvas id="bar_chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <!-- #END# Bar Chart -->
</div>

这是我的 javascript 中的代码，但这里没有指向我的数据库的链接，我如何同步我的 javascript 并获取这些信息？

    $(function () {
    //new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    //new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
    //new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
});

function getChartJs(type) {
    var config = null;

    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: ["JANEIRO", "FEVEREIRO", "MARÇO", "ABRIL", "MAIO", "JUNHO", "JULHO", "AGOSTO", "SETEMBRO", "OUTUBRO", "NOVEMBRO", "DEZEMBRO"],
                datasets: [{
                    label: "Imóveis cadastrados",
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(0, 188, 212, 0.8)'
                }, {
                        label: "Imóveis cadastrados",
                        data: [28, 48, 40, 19, 86, 27, 90],
                        backgroundColor: 'rgba(233, 30, 99, 0.8)'
                    }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    return config;
}

Answer 1

一种方法是使用您的控制器以数组格式创建数据，并将该数据作为 json 字符串传递到您的视图中。

在php中创建.js需要的数据数组：

$chartData = [
    'labels' => ['Janeiro', 'Fevereiro', ...], 
    'datasets' => [ 
        [
            'label' => "Imóveis cadastrados",
            'data' => [65, 59, 80, 81, 56, 55, 40],
            'backgroundColor' => 'rgba(0, 188, 212, 0.8)'
        ], 
        [...] 
    ] 
];

然后 json_encode 该数据作为画布的数据属性（此处的语法将根据您将动态数据传递到视图中的方法而有所不同，我将在此处使用原始 PHP 进行演示）：

<canvas id="bar_chart" height="50" data-chart-data="<?php json_encode($chartData); ?>"></canvas>

然后最后使用该数据属性中包含的 json 来为您的图表提供动力：

config = {
            type: 'bar',
            data: document.getElementById("bar_chart").data('chart-data'),
            options: {
                responsive: true,
                legend: false
            }
        }