希望使用javascript chart.js在同一张图表中绘制不同年份的图表

Question

我希望使用chart.js和javascript在同一条线图中绘制实用程序的成本图表：

以下是我的MySQL数据示例：

1  | Gas company | Heating |  84.39 | 2018-01-01
2  | Gas company | Heating | 219.77 | 2018-02-01
3  | Gas company | Heating | 109.02 | 2018-03-01
4  | Gas company | Heating |  88.79 | 2018-04-01
5  | Gas company | Heating |  50.08 | 2018-05-01
6  | Gas company | Heating |  34.14 | 2018-06-01
7  | Gas company | Heating |  33.65 | 2018-07-01
8  | Gas company | Heating |  32.61 | 2018-07-01
9  | Gas company | Heating |  33.11 | 2018-08-01
10 | Gas company | Heating |  48.71 | 2018-09-01
11 | Gas company | Heating |  71.16 | 2018-10-01
12 | Gas company | Heating |  71.86 | 2018-11-01
13 | Gas company | Heating |  84.39 | 2018-12-01
14 | Gas company | Heating | 219.77 | 2019-01-01
15 | Gas company | Heating | 109.02 | 2019-02-01
16 | Gas company | Heating |  88.79 | 2019-03-01
17 | Gas company | Heating |  50.08 | 2019-04-01
18 | Gas company | Heating |  34.14 | 2019-05-01
19 | Gas company | Heating |  33.65 | 2019-06-01
20 | Gas company | Heating |  32.61 | 2019-07-01
21 | Gas company | Heating |  33.11 | 2019-08-01
22 | Gas company | Heating |  48.71 | 2019-09-01
23 | Gas company | Heating |  71.16 | 2019-10-01
24 | Gas company | Heating |  71.86 | 2019-11-01

这是我的javascript：

$(document).ready(function() {
    $.ajax({
        url: "http://testsite.php",
        type: "GET",
        success: function(data) {
            console.log(data);

            var utility_date = [];
            var utility_cost = [];

            for (var i in data) {
                utility_date.push(data[i].utility_date);
                utility_cost.push(data[i].utility_cost);
            }

            var chartdata = {
                labels: utility_date,
                datasets: [{
                    label: "Heating 2018",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 89, 152, 0.75)",
                    borderColor: "rgba(59, 89, 152, 1)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: utility_cost,
                }, {
                    label: "Heating 2019",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 89, 152, 0.75)",
                    borderColor: "rgba(59, 89, 152, 1)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: utility_cost,
                }, ]
            };

            var ctx = $("#util-heating");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error: function(data) {

        }
    });
});