使用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 
    }, 
    ..... 
]; 

更多示例可以發現here。

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 
    }] 
});