Question

当前我将图表上显示的所有日期和y值都显示为一行，而实际上我希望得到四行。像T3，T4，TSH和甲状腺球蛋白。可以看出，每种测试类型有2个结果。

这是My JSON和JQUERY代码

[
    {
        "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"
    }
]

这是我的JQUERY

$(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){

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

                    $("#chart").CanvasJSChart({ //Pass chart options
                         title:{text:"Blood Test Results"},
                         axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},
                        data: [{
                        type: "line", //change it to column, spline, line, pie, etc

                        dataPoints:dataPoints}]
                    });
                //chart.render();
                }


            });


        });
});

Answer 1

据我所知，您使用不正确的语法来创建图表。请尝试以下代码。看起来您可能需要过滤数据，否则会创建图表。

<强> HTML

<div id="chart"></div>

<强> JS

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

    var chart = new CanvasJS.Chart('chart', { //Pass chart options
        title: {
            text: "Blood Test Results"
        },
        axisX: {
            valueFormatString: "DD-MM-YYYY",
            labelAngle: -45
        },
        data: [{
            type: "line", //change it to column, spline, line, pie, etc

            dataPoints: dataPoints
        }]
    });
    chart.render();
});

FIDDLE

如何从My JSON数据中绘制四行数据

1 个答案: