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