参见here对于 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 constructor从字符串创建日期,因此在其内部 Date parsing function 。虽然 Chrome 能够识别出非标准日期字符串,但 Firefox 却不能。
您可以使用 D3 date format object 来避免歧义。进行日期解析:
var dateFormatIn = d3.time.format.utc('%Y-%m-%d %H:%M:%S UTC');
service2Data["values"].forEach(function(hash) {
hash["x"] = dateFormatIn.parse(hash["x"]);
});
顺便说一下,您可以在图表对象上设置一个 x-accessor 函数,而不是使用 for 循环来遍历数据数组并解析日期:
var chart = nv.models.lineChart()
.x(function(d){return dateFormatIn.parse(d.x);})
关于firefox - nvd3 图表在 Firefox 中无法正确加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22175809/