[英]Date label doesn't show on the Canvasjs chart when using JSON data
I am trying to use Canvasjs to draw a graph representing blood test results. 我正在尝试使用Canvasjs绘制代表血液测试结果的图形。 My JSON data appears to be fine, and when I run it it creates the graph with the y
values only. 我的JSON数据似乎很好,当我运行它时,它仅使用y
值创建图形。 Nothing on the x
. x
上没有任何内容。
Here is my JSON data: 这是我的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
}
]
Here is my page code: 这是我的页面代码:
$(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();
}
});
});
});
You need to convert values on your x-axis to javascript Date
objects like this: 您需要将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
},
.....
];
You need to transform your x
data points to Date
before passing them to the chart: 您需要先将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
}]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.