请参阅此处,以获取一个简单示例的JSFiddle,该示例在Firefox中无法为我正确加载。它可以在JSFiddle和Chrome上完美运行,但不能在Firefox中运行。
在Firefox中,它只是在图表的最左侧(即基本上在y轴上)绘制了一些线,并说开始时间是31-12-1969 23:59:59。
让我认为Firefox创建Javascript日期的方式可能有所不同?远射...
谁能阐明为什么会这样?
代码在这里:
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 100, bottom: 120})
.useInteractiveGuideline(true)
.transitionDuration(350)
.showLegend(true)
.showYAxis(true)
.showXAxis(true);
chart.xAxis
.rotateLabels(-45)
.tickFormat(function(d) { return d3.time.format('%d-%m-%Y %H:%M:%S')(new Date(d)) });
chart.yAxis
.axisLabel('Latency (ms)')
.tickFormat(d3.format('.0f'));
var service1Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":100},{"x":"2014-03-03 11:00:00 UTC","y":200},{"x":"2014-03-03 20:00:00 UTC","y":50}],"key":"service1","color":"#ff7f0e"};
var service2Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":200},{"x":"2014-03-03 11:00:00 UTC","y":300}],"key":"service2","color":"#3c9fad"};
// Make the dates easy for d3 to work with
service1Data["values"].forEach(function(hash) {
hash["x"] = new Date(hash["x"]);
});
service2Data["values"].forEach(function(hash) {
hash["x"] = new Date(hash["x"]);
});
var serviceData = [service1Data, service2Data];
d3.select('#chart_latency svg')
.datum(serviceData)
.call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
您要依靠浏览器的内部Date构造函数从字符串创建日期,因此要依靠其内部的Date解析函数。尽管Chrome能够找出您的非标准日期字符串,但Firefox却无法。
您可以通过使用避免歧义D3日期格式对象做日期解析:
var dateFormatIn = d3.time.format.utc('%Y-%m-%d %H:%M:%S UTC');
service2Data["values"].forEach(function(hash) {
hash["x"] = dateFormatIn.parse(hash["x"]);
});
顺便说一句,您无需使用for循环遍历数据数组和解析日期,而只需在图表对象上设置x-accessor函数即可:
var chart = nv.models.lineChart()
.x(function(d){return dateFormatIn.parse(d.x);})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句