使用JSON數據時，日期標簽未顯示在Canvasjs圖表上

Question

我正在嘗試使用Canvasjs繪制代表血液測試結果的圖形。 我的JSON數據似乎很好，當我運行它時，它僅使用y值創建圖形。 x上沒有任何內容。

這是我的JSON數據：

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

這是我的頁面代碼：

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

                    $("#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
                        xValueType:"date",
                        dataPoints:json}]
                    });
                //chart.render();
                }

            }); 
        });
});

Answer 1

您需要將x軸上的值轉換為javascript Date對象，如下所示：

[
  {
    "legend": "t3",
    "x": new Date(2004, 7, 5),
    "y": 6.8
  },
  {
    "legend": "t4",
    "x": new Date(2004, 7, 5),
    "y": 29
  },
  {
    "legend": "tsh",
    "x": new Date(2004, 7, 5),
    "y": 0.01
  },
  .....
];

在這里可以找到更多示例。

Answer 2

您需要先將x數據點轉換為Date然后再將它們傳遞到圖表：

// To use the jQuery version
//var dataPoints = $.map(data, function (p) {
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
      //xValueType:"date",
      dataPoints: dataPoints
    }]
});