NVD3 - 使用最新版本的 safari 折线图 NaN

Question

使用 NVD3 作为折线图，我的所有数据都被插入一条垂直线（而不是横跨水平线），当我将鼠标悬停在这条线上时，我重复得到 0NaN。这只发生在使用 safari

这里是 java:

function drawChart(div, att_speed, data) {
  nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .interpolate("cardinal")
    .forceY([0,att_speed])
    ;
    // Convert the date passed as a STRING into a DATE object
    chart.x(function(d) { 
      return new Date(d.x); 
    });
    chart.xAxis.axisLabel('Time (m)');
    chart.xAxis.tickFormat(function(d) {
      return d3.time.format('%H:%M')(new Date(d));
    });
    chart.yAxis
      .axisLabel("Speed (mb)") //Set Y-Axis attributes.
      .tickFormat(d3.format(".0f")) //Set Y-Axis label formatting.
    ;
    d3.select("#" + div + " svg") //Select the document's <svg> element
      .datum(data) 
      .transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.

    nv.utils.windowResize(chart.update);

    return chart; 
  });        
}
datalink_one = [
        {
            values: [{"x": "2018-06-19 14:21:22", "y": "80"}, {"x": "2018-06-19 14:24:02", "y": "89"}, {"x": "2018-06-19 14:25:10", "y": "127"}, {"x": "2018-06-19 14:28:04", "y": "91"}, {"x": "2018-06-19 14:30:11", "y": "92"}, {"x": "2018-06-19 14:31:21", "y": "80"}, {"x": "2018-06-19 14:34:03", "y": "131"}, {"x": "2018-06-19 14:35:28", "y": "98"}, {"x": "2018-06-19 14:37:11", "y": "86"}, {"x": "2018-06-19 14:39:02", "y": "111"}, {"x": "2018-06-19 14:42:03", "y": "95"}, {"x": "2018-06-19 14:43:04", "y": "165"}, {"x": "2018-06-19 14:45:11", "y": "89"}, {"x": "2018-06-19 14:47:11", "y": "133"}, {"x": "2018-06-19 14:49:16", "y": "134"}, {"x": "2018-06-19 14:52:05", "y": "157"}, {"x": "2018-06-19 14:54:13", "y": "66"}, {"x": "2018-06-19 14:55:09", "y": "95"}, {"x": "2018-06-19 14:58:02", "y": "112"}, {"x": "2018-06-19 14:59:09", "y": "98"}],
            key: "Download",
            color: "#337ab7",
            area: true   
        },
        {
            values: [{"x": "2018-06-19 14:21:22", "y": "17"}, {"x": "2018-06-19 14:24:02", "y": "49"}, {"x": "2018-06-19 14:25:10", "y": "44"}, {"x": "2018-06-19 14:28:04", "y": "57"}, {"x": "2018-06-19 14:30:11", "y": "18"}, {"x": "2018-06-19 14:31:21", "y": "14"}, {"x": "2018-06-19 14:34:03", "y": "20"}, {"x": "2018-06-19 14:35:28", "y": "24"}, {"x": "2018-06-19 14:37:11", "y": "19"}, {"x": "2018-06-19 14:39:02", "y": "29"}, {"x": "2018-06-19 14:42:03", "y": "12"}, {"x": "2018-06-19 14:43:04", "y": "13"}, {"x": "2018-06-19 14:45:11", "y": "22"}, {"x": "2018-06-19 14:47:11", "y": "14"}, {"x": "2018-06-19 14:49:16", "y": "29"}, {"x": "2018-06-19 14:52:05", "y": "14"}, {"x": "2018-06-19 14:54:13", "y": "11"}, {"x": "2018-06-19 14:55:09", "y": "29"}, {"x": "2018-06-19 14:58:02", "y": "15"}, {"x": "2018-06-19 14:59:09", "y": "25"}],
            key: "Upload",
            color: "#5cb85c",
            area: true   
        }
    ]
drawChart('one-speed-chart', 500.0, datalink_one)

这是一个 fiddle（在 safari 中会失败）

https://jsfiddle.net/xpvt214o/279009/

这是截图

Answer 1

我在使用您的代码时注意到的一些事情。

在 key: 'Upload' 的部分数据集中，您在单引号内获得了 'x' 的值，最好在数据集中保持一致。我通常不对 x 使用单引号。

您得到 0NaN 的原因是因为您将日期作为 STRING 而不是 DATE 对象传递。

下面是我添加到您的代码中的内容：

var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart  

// Convert the date passed as a STRING into a DATE object
chart.x(function(d) {     
  return new Date(d.x);
});

这是您的代码的工作版本 here。

我建议您在 X 轴上设置日期格式以避免它们相互重叠。您可以找到有关时间的更多信息 formatting using d3.js here

UPDATED 使用您的代码的工作版本 here

要解决 Safari 浏览器上的 NaN 问题，您可以相应地格式化时间

  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%Y-%m-%dT%H:%M:%S')(new Date(d));
  });

希望对您有所帮助

Answer 2

我终于找到答案了，对于safari，你的日期时间格式需要如下json

%Y-%m-%dT%H:%M:%S

我找到的这个问题让我找到了答案 Safari Javascript Date() NaN Issue (yyyy-MM-dd HH:mm:ss)

NVD3 - 使用最新版本的 safari 折线图 NaN

NVD3 - line chart NaN on safari using latest versions

jquery

d3.js

nvd3.js