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

使用JSON数据时，Canvasjs图表上不显示日期标签

2 个答案: