如何绘制出我的JSON数据中的四行数据

Question

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

这里是我的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