如何繪製出我的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