mysql sum查詢chart.js

Question

下面是我的代碼，用於顯示日期和金額的數組。 它將用作chart.js中的數據集

日期已正確顯示為2018年4月2018年5月2018年6月

但金額僅顯示一個記錄。

我試圖在mysql中運行查詢。 它給出正確的表。

代碼中的回顯用於確認正確的記錄。

我需要顯示： “ 2018年4月”，“ 2018年5月”，“ 2018年6月”

250.65、278、300

將用作chart.js的數據集

<?php
    $sql = mysqli_query($mysqli, "SELECT DATE_FORMAT(trip_start,'%Y-%m') as trip_start1, sum(fare_amount) as income
        FROM trip
        WHERE trip_start IS NOT NULL
        GROUP BY trip_start1
        ORDER by trip_start1"
    );
    while($row = mysqli_fetch_array($sql)){
        $fare_amount = $row['income'];
        $date = date('M, Y', strtotime($row['trip_start1']));
        $dates = $dates.'"'.$date.'",';
        $fare_amount= $fare_amount.', '.$fare_amount.',';
    }
    $dates = trim($dates, ",");
    $fare_amount = trim($fare_amount, ",");
    echo $dates . '<br/>' ; //just to confirm if it will display correct array
    echo $fare_amount; //just to confirm if it will display correct array
?>

這是我的數據庫：

CREATE TABLE IF NOT EXISTS `trip` (
    `id` int(10) unsigned NOT NULL,
    `driver_id` int(10) unsigned NOT NULL,
    `passenger_id` int(10) unsigned NOT NULL,
    `source` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `destination` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `trip_start` timestamp NULL DEFAULT NULL,
    `trip_end` timestamp NULL DEFAULT NULL,
    `fare_amount` double DEFAULT NULL,
    `status` varchar(45) COLLATE utf8_unicode_ci NOT NULL,
    `payment_mode` varchar(45) COLLATE utf8_unicode_ci NOT NULL,
    `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
    `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE 
    CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `trip` (`id`, `driver_id`, `passenger_id`, `source`, `destination`, `trip_start`, `trip_end`, `fare_amount`, `status`, `payment_mode`, `created_at`, `updated_at`) 
VALUES(5, 6, 1, '14.6760413', '121.0437003', '2018-04-07 08:01:00', '2018-04-07 09:00:00', 250.65, 'complete', 'cash', '2018-04-06 23:06:43', '2018-04-13 02:28:21'),
(6, 6, 2, '15.6760413', '122.0437003', '2018-05-08 16:11:00', '2018-04-07 17:03:00', 278, 'complete', 'cash', '2018-04-06 23:06:43', '2018-04-14 03:40:58'),
(8, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-12 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 10:51:16', '2018-04-14 03:44:41'),
(9, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-12 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 11:08:43', '2018-04-14 03:45:59'),
(10, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-28 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 11:10:12', '2018-04-14 03:46:37');

我的代碼顯示圖表：

        <div><h1>Budget Charts</h1></div>
        <div style="width:60%"><canvas id="Chart" ></canvas></div>
        <!-- jQuery cdn -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
        <!-- Chart.js cdn -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
    </body>
</html>
<script> // chart DOM Element
    var ctx = document.getElementById("Chart");
    var data = {
        datasets: [{
            data: [<?php echo $fare_amount; ?>],
            backgroundColor: 'transparent',
            //backgroundColor: 'rgba(69, 92, 115, 0.5)',
            //backgroundColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4)',
            //backgroundColor: "#455C73",
            borderColor: "#39a",
            borderWidth: 5,
            label: 'Revenue' // for legend
        }],
        labels: [<?php echo $dates; ?>]
    };
    var xChart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
        // The data for our dataset
        data: data,
        // Configuration options go here
        options: {
            legend: {
                display: true,
                position: 'left',
                labels: {
                    fontColor: 'black'
                    //fontColor: 'rgb(255, 99, 132)'
                }
            },
            tooltips: {mode: 'y'},
            scales: {
                yAxes: [{
                    ticks: {beginAtZero: true}
                }],
                xAxes: [{
                    ticks: {
                        autoskip: true,
                        maxTicksLimit:6
                    }
                }]
            }
        }
    });
</script>

Answer 1

為js代碼准備數據的基本方法是收集數組中的數據，將數組json_encode編碼為字符串並輸出此字符串：

$sql = mysqli_query($mysqli, "SELECT DATE_FORMAT(trip_start,'%Y-%m') as
trip_start1,  fare_amount as income
FROM trip
WHERE trip_start IS NOT NULL
GROUP BY trip_start1
ORDER by trip_start1");

$data = [
    'amounts' => [],
    'dates' => [],
];
while($row = mysqli_fetch_array($sql)){
    $data['amounts'][]    = $row['income'];
    $data['dates'][]      =  date('M, Y', strtotime($row['trip_start1']));
}

// merge subarrays into single one to get output as you want
$data = array_merge($data['amounts'], $data['dates']);

echo json_encode($data);