下面是显示日期和金额数组的代码。它将用作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>