使用 Javascript 生成图表

我已经编写了使用 javascript 生成图表的代码，它工作正常，正如您在截取的代码中看到的数据是硬编码的，问题是如何使这段代码适用于 ajax 数据而不是硬编码数据？

法典：

   window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer",
            {
                title: {
                    text: "Average monthly rainfull for 30 years"
                },
                animationEnabled: true,
                axisY: {
                    title: "Precipitation inches",
                    includeZero: false
                },
                axisX: {
                    title: "Months",
                    interval: 1
                },
                toolTip: {
                    shared: true,
                    content: function (e) {
                        var body = new String;
                        var head;
                        for (var i = 0; i < e.entries.length; i++) {
                            var str = "<span style = 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: strong" + e.entries[i].dataPoint.y+ "</strong>''<br/>";
                            body = body.concat(str);
                        }
                        head = "<span style = color:DodgerBlue;'><strong>" + (e.entries[0].dataPoint.label) + "</strong></span><br/>";
                        return (head.concat(body));
                    }
                },
                legend: {
                    horizontalAlign: "center",
                },
                data: [
                    {
                        type: "spline",
                        showInLegend: true,
                        name: "Boston",
                        dataPoints: [
                            { label: "Jan", y: 3.1 },
                            { label: "Feb", y: 3.32 },
                            { label: "Mar", y: 3.2 },
                            { label: "Apr", y: 3.4 },
                            { label: "May", y: 3.5 },
                            { label: "Jun", y: 3.6 },
                            { label: "Jul", y: 3.7},
                            { label: "Aug", y: 3.8 },
                            { label: "Sep", y: 3.9 },
                            { label: "Oct", y: 3.10 },
                            { label: "Nov", y: 3.11},
                            { label: "Dec", y: 3.12}

                        ]
                    },
                {
                type: "spline",
                showInLegend: true,
                name: "Yemen",
                dataPoints: [
                    { label: "Jan", y: 4.1 },
                    { label: "Feb", y: 5.32 },
                    { label: "Mar", y: 2.2 },
                    { label: "Apr", y: 4.4 },
                    { label: "May", y: 1.5 },
                    { label: "Jun", y: 4.6 },
                    { label: "Jul", y: 9.7},
                    { label: "Aug", y: 4.8 },
                    { label: "Sep", y: 3.9 },
                    { label: "Oct", y: 2.10 },
                    { label: "Nov", y: 5.11},
                    { label: "Dec", y: 3.12}
                ]
            }
                ],
                legend: {
                    cursor: "pointer",
                    itemClick: function (e) {
                        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                            e.dataSeries.visible = false;
                        } else {
                            e.dataSeries.visible = true;
                        }
                        chart.render();
                    }
                }
            });
        chart.render();
    }

阿贾克斯：

$(document).ready(function () {
        var url_list = "api/usergroup/getdata";
        $.getJSON(url_list)
        .done(function (data) {
        });
    });

数据如下所示：

[{"id":1,"state_code":"JHR","state_name":"Jor","category_code":"DAM","station_code":"BEKOK-P","station_name"
:"Bekok Dam Penstock","item_id":1,"desc":"Test Expenses","qty":2,"price":19.00,"total":38.00,"date":"2016-01-05T17
:26:10","remark":"1. just for test purpose."}]