使用 2 个数据库表创建一个 ChartJS

Question

我正在尝试创建一个结合了我数据库的 2 个表的图表 (ChartJS)。

案例：

数据库

tableObject
-- user_id
-- object_id
-- object_name
-- object_date_created (YYY-MM-DD)
tableObjectAmount
-- object_amount_id
-- object_id（对应tableObject）
-- object_total

我想创建一个显示 object_amount / object_date 的图表；并且仅在我的应用程序的 tableObject->user_id == user_id 时显示。

这是我的问题。

所以我的应用运行在 Codeingniter 上，这里是我的代码：

public function index() {

    $objectsArray = array();
    $objectsDates = [];
    $objectsAmounts = [];

    $this->db->select('*');
    $this->db->from('objects');
    $this->db->where('user_id', $this->session->userdata('user_id'));
    $objectsDatesQuery = $this->db->get();


    foreach ($objectsDatesQuery->result() as $objectsDatesQueryRow) {
        $objectsDates['object_id'] = $objectsDatesQueryRow->object_id;
        $objectsDates['date'] = $objectsDatesQueryRow->object_date_created;


        $this->db->select('*');
        $this->db->from('object_amounts');
        $this->db->where('object_id', $objectsDates['object_id']);
        $objectsAmountsQuery = $this->db->get();

        foreach ($objectsAmountsQuery->result() as $objectsAmountsQueryRow) {
            $objectsDates['object_date'] = $objectsDatesQueryRow->object_date_created;
            $objectsAmounts['object_total'] = $objectsAmountsQueryRow->object_total;

            $objectsArray = array(
                'object_date' =>  $objectsDatesQueryRow->object_date_created,
                'object_total' => $objectsAmounts['object_total'],
            );
        }
    }
}

我图表的代码JS :

    var ctx = document.getElementById('myChart').getContext('2d');
        ctx.height = 246;
    var chartData = {"jsonarray": <?php echo json_encode($objectsArray); ?>};

    var labels = <?php echo json_encode($objectsArray['object_date']) ?>;
    var data = <?php echo json_encode($objectsArray['object_total']) ?>;

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Object',
                    borderColor: "black",
                    color: 'red',
                    backgroundColor: "white",
                    height: 200,
                    pointRadius: 0,
                    data: data
                }
            ]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    min: 0,
                    color: 'black'
                },
                x: {
                    min: 0,
                    color: 'black',
                }
            }
        }
    });

当我做的时候

var_dump(json_encode($objectsArray))

我有

string(55) "{"objet_date":"2022-03-29","object_total":"3500.00"}"

最后，我的 chartJS：

Result of my chartJS

非常感谢您的帮助！

Answer 1

您可能想使用连接并在一个查询中获取数据：

$this->db->select('o.object_date_created, SUM(oa.object_total) AS total');
$this->db->from('objects o');
$this->db->join('object_amounts oa', 'o.object_id = oa.object_id', 'left outer');
$this->db->where('o.user_id', $this->session->userdata('user_id'));
$this->db->group_by('o.object_date_created');
$this->db->order_by('o.object_date_created', 'ASC');
$objectsArray = $this->db->get()->result_array();

这将从对象table中为某个用户选择所有对象，并为每个对象从object_amountstable中找到对应的object_amounts。 join 上的 left outer 还包括没有相应 object_amounts 的对象。

我假设您想显示每个 object_date_created 的 object_totals 的总和： group_by 按日期对总计进行分组，SUM(oa.object_total) 对每个日期的总计求和， order_by 然后按日期对结果总和进行排序。

在你的 JavaScript 中：

var chartData = JSON.parse(<?= json_encode($objectsArray); ?>);

var labels = chartData.map( el => el.object_date_created );
var data = chartData.map( el => el.total );

使用 2 个数据库表创建一个 ChartJS

Create a ChartJS with 2 database tables

php

mysql

database

codeigniter

chart.js