我正在使用给定的graph1.json文件。 createdOn日期存储为日期时间值。绘制图表但创建了错误的createdOn值。如何解析绘制图表的日期。
# mtc1 example:
li $v0, 0x3F800000 # v0 = 1.0f
mtc1 $v0, $f0 # f0 = 1.0f
我的控制器是
{
"Vitals": [
{
"createdOn": "2015-08-01 23:35:15.652",
"read": "1",
"ews": 3,
"vitalVal": 78
},
{
"createdOn": "2015-08-01 22:35:15.652",
"read": "1",
"ews": 2,
"vitalVal": 82
},
{
"createdOn": "2015-08-01 21:35:15.652",
"read": "1",
"ews": 2,
"vitalVal": 80
},
{
"createdOn": "2015-08-01 21:25:15.652",
"read": "1",
"ews": 4,
"vitalVal": 101
},
{
"createdOn": "2015-08-01 21:15:15.652",
"read": "1",
"ews": 0,
"vitalVal": 100
},
{
"createdOn": "2015-08-01 21:05:15.652",
"read": "1",
"ews": 1,
"vitalVal": 85
},
{
"createdOn": "2015-08-01 20:59:15.652",
"read": "1",
"ews": 0,
"vitalVal": 91
},
{
"createdOn": "2015-07-27 12:58:15.652",
"read": "1",
"ews": 0,
"vitalVal": 96
},
{
"createdOn": "2015-07-27 12:57:15.652",
"read": "1",
"ews": 0,
"vitalVal": 94
}
],
"unit": "mg"
}
我在html文件中渲染svg
.controller('ChartCtrl', ['$scope','$http', function ($scope,$http) {
}])
.directive('linearChart', ['$http',function ($http) {
return {
restrict: 'EA',
link: function (scope, elem, attrs) {
var req = {
method: 'GET',
url: 'js/modules/myvitals/graph1.json',
headers: {
'Content-Type': "application/json"
},
data: {
"userName":'userName'
,"password":'password'
}
};
$http(req).then(function(response){
//console.log(response.data);
scope.data = response.data.SPO2;
var data = scope.data;
var margin = {
top: 40,
right: 20,
bottom: 30,
left: 50
},
width = 365 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
console.log("Date parsed:"+parseDate);
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5).tickFormat(d3.time.format("%d"));
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line1
var valueline1 = d3.svg.line()
.x(function (d) {
return x(new Date(d.createdOn));
// return x(d.date);
})
.y(function (d) {
return y(d.vitalVal);
});
// Adds the svg canvas
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return new Date(d.createdOn);
}));
y.domain([0, d3.max(data, function (d) {
return d.vitalVal;
})]);
// Add the valueline1 path.
svg.append("path")
.attr("class", "line")
//.attr("id", "valueline1") //add id to path for hide/show
.attr("d", valueline1(data));
//text label for y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("class", "ylabel")
.text("Measurement (bpm)");
// text label for the x axis
svg.append("text")
.attr("x", width/2 )
.attr("y", height +30)
.style("text-anchor", "middle")
.attr("class", "xlabel")
.text("Date");
// Add the scatterplot for line1
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.5)
// .attr("class", "valueline1") //add class to each dot
.style("fill", function (d) {
if (d.ews == 0) return "green";
if (d.ews == 1) return "yellow";
if (d.ews == 2) return "orange";
if (d.ews == 3) return "red";
})
.attr("cx", function (d) {
return x(new Date(d.createdOn));
//return x(parseDate(d.createdOn));
})
.attr("cy", function (d) {
return y(d.vitalVal);
}) .on("mouseover", function () {
return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
})
.on("mousemove", function (d) {
// console.log()
d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 12) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
d3.select("#mytooltip").select("#txvalue").text(function () {
return d.createdOn; //setting the date values to tooltip
});
d3.select("#mytooltip").select("#tyvalue").text(function () {
return d.vitalVal; //setting the date values to tooltip
});
return;
})
.on("mouseout", function () {
return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// console.log(resposneData);
}, function(error){
console.log(error);
});
}
};
}])
答案 0 :(得分：1)
你可以在工具提示中做这样的事情
d3.select("#mytooltip").select("#ttdate").text(function () {
var timeFormat = d3.time.format('%I:%M %p');//to show time in 10.00 AM, 12.30 PM
return timeFormat(new Date(d.date)); //setting the time values to tooltip
});
d3.select("#mytooltip").select("#ttclose").text(function () {
return d.close; //setting the date values to tooltip
});
这是针对d3日期格式http://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95
的非常好的教程希望这有帮助！