见这里的,这不是在Firefox正确加载,我的简单例子的的jsfiddle.它适用于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; });
AmeliaBR.. 5
您依赖于浏览器的内部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"]); });
http://jsfiddle.net/yzA32/4/
顺便说一下,您可以在图表对象上设置x-accessor函数,而不是使用for循环来遍历数据数组并解析日期.
var chart = nv.models.lineChart() .x(function(d){return dateFormatIn.parse(d.x);})
http://jsfiddle.net/yzA32/5/