我正在创建一个图表,它从服务器获取分页数据,然后使用 D3 库和 n3-charts 库(http://n3-charts.github.io/line-chart/#/examples)绘制图表我在使用这个库时遇到的问题是我的服务器正在返回一个 PHP W3C 格式的日期,Angular 可以处理和使用过滤器,但是 n3 图表库无法处理这种格式。关于如何将日期字符串转换为日期对象,我尝试了几种不同的想法,但都无济于事。
是否有人使用 d3 库创建了温度与时间图或使用 n3 图表来实现此功能?这种类型的图表是否有更好的选择?由于最近的 ng-newsletter with directives 示例文章,我才开始关注这个。
这是我当前的 ctrl 代码:
var successCb = function(result) {
result.forEach(function(val, index, theArray) {
$scope.readings.push(val);
});
}
var errorCb = function(data) {
console.log('Failed');
}
for (var i = 1; i <= 5; i++) {
Reading.getAll({limit: 1000, page: i}, successCb, errorCb);
}
$scope.options = {
axes: {
x: {type: "date", key: "_Time"},
y: {type: "linear"}
},
series: [
{y: "_degreeF", label: "Temp over Time", color: "#9467bd"}
],
lineMode: "linear",
tooltipMode: "default"
};
数据样本如下所示:
$scope.data = [
{
"_ID":1,
"_time":"2013-10-21T16:46:5905:00",
"_degreeF":69.58,
"_degreeC":20.88,
"_sensor":
{
"_ID":2,
"_name":"Test Sensor 2",
"_sensorID":"28-00000505f8b6"
}
},
{
"_ID":2,
"_time":"2013-10-21T16:47:01-05:00",
"_degreeF":69.58,
"_degreeC":20.88,
"_sensor":
{
"_ID":2,
"_name":"Test Sensor 2",
"_sensorID":"28-00000505f8b6"
}
}
]
最佳答案
您可以使用 d3 时间格式 d3.time.format 将您的日期解析为 JS 日期对象。
这是一个 d3js 温度线图:
http://vida.io/documents/QZZTrhk7SmfChczYp
带日期解析功能:
d3.time.format("%Y-%m-%d").parse
关于javascript - 带有 n3 图表的 AngularJS D3 可视化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19550482/