-1

我想要的只是能够在 JSON 上运行我的 for 循环，并根据测试的名称在 Canvas 图表上绘制一条新行及其值。

我无法在图表上显示不同的水平线

$(document).ready(function(){ 

    $("#find").click(function(e){

                e.preventDefault();
        $.ajax({
            // the URL for the request
            url: "bloodTest.php",
            // the data to send (will be converted to a query string)
            data: {pnhsno: "1001001002"},
            // whether this is a POST or GET request
            type: "GET",
            // the type of data we expect back
            dataType : "json",
            // code to run if the request succeeds;
            // the response is passed to the function
            success: function(json){

                if(json.length !=0){

                    var dataPoints = json.map(function (p) {
                    p.x = new Date(p.x);
                    return p;
                    });

                    dp = [];
                    for(var i=0; i<dataPoints.length; i++){

                        if(dataPoints[i].t =="t3"){
                        dp.push({x:dataPoints[i].x, y:dataPoints[i].y})

                             else if(dataPoints[i].t =="tsh"){
                            dp.push({x:dataPoints[i].x, y:dataPoints[i].y})}

                                $("#chart").CanvasJSChart({ //Pass chart options
                                title:{text:"Blood Test Results"},
                                axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},

                                data: [{
                                    type: "line",
                                    dataPoints:dp}]});

                        }//if
                    }//for
                }//if
            }//json
            });});

});

JSON数据

[
    {
        "t": "t3",
        "y": 6.8,
        "x": "2004-07-05"
    },
    {
        "t": "t4",
        "y": 29,
        "x": "2004-07-05"
    },
    {
        "t": "tsh",
        "y": 0.01,
        "x": "2004-07-05"
    },
    {
        "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2004-07-05"
    },
    {
        "t": "t3",
        "y": 5.2,
        "x": "2005-06-15"
    },
    {
        "t": "t4",
        "y": 30,
        "x": "2005-06-15"
    },
    {
        "t": "tsh",
        "y": 0.02,
        "x": "2005-06-15"
    },
    {
        "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2005-06-15"
    }
]
4

1 回答 1

0

这是我的问题的答案。

$(document).ready(function(){ 

    $("#find").click(function(e){

                e.preventDefault();
        $.ajax({
            // the URL for the request
            url: "bloodTest.php",
            // the data to send (will be converted to a query string)
            data: {pnhsno: "1001001002"},
            // whether this is a POST or GET request
            type: "GET",
            // the type of data we expect back
            dataType : "json",
            // code to run if the request succeeds;
            // the response is passed to the function
            success: function(json){

                if(json.length !=0){
                    var dataPoints = json.map(function (p) {
                    p.x = new Date(p.x);
                    return p;
                    });

                    var dp1 = [];
                    var dp2 = [];
                    var dp3 = [];
                    var dp4 = [];
                    var name;
                    var lt1; var lt2; var lt3; var lt4;

                    for(var i=0; i<dataPoints.length; i++){
                        if(dataPoints[i].t =="t3"){
                        lt1 =dataPoints[i].t;
                        name = "series1";
                        dp1.push({x:dataPoints[i].x, y:dataPoints[i].y})}

                             else if(dataPoints[i].t =="tsh"){
                             lt2 =dataPoints[i].t;
                             name = "series2";
                            dp2.push({x:dataPoints[i].x, y:dataPoints[i].y})}

                            else if(dataPoints[i].t =="t4"){
                            lt3 =dataPoints[i].t;
                            name = "series3";
                            dp3.push({x:dataPoints[i].x, y:dataPoints[i].y})}

                            else if(dataPoints[i].t =="thyroglobulin level"){
                            lt4 =dataPoints[i].t;
                            name = "series4";
                            dp4.push({x:dataPoints[i].x, y:dataPoints[i].y})}

                    }

                             $("#chart").CanvasJSChart({ //Pass chart options
                                title:{text:"Blood Test Results"},
                                axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},

                                data: [
                                    {
                                    type: "line",
                                    legendText:lt1,
                                    name:name,
                                    showInLegend:true,
                                    dataPoints:dp1
                                    },
                                    {
                                    type: "line",
                                    legendText:lt2,
                                    name:name,
                                    showInLegend:true,
                                    dataPoints:dp2
                                    },
                                    {
                                    type: "line",
                                    legendText:lt3,
                                    name:name,
                                    showInLegend:true,
                                    dataPoints:dp3
                                    },
                                    {
                                    type: "line",
                                    legendText:lt4,
                                    name:name,
                                    showInLegend:true,
                                    dataPoints:dp4
                                    }
                                    ]});  
                //}

                }//if
            }//json
            });});});
于 2014-11-09T12:21:29.723 回答