Дата создания ошибки в nvd3

Я показываю простую диаграмму с использованием nvd3, и я получаю NaN при форматировании из строковой даты. Когда я использую код с явными датами javascript (например, с комментарием var testdata). график показан правильно. Вот мой код. Но я хотел бы использовать строки, что здесь не так?Дата создания ошибки в nvd3

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link href="novus-nvd3-153163a/build/nv.d3.css" rel="stylesheet" type="text/css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> 
    <script src="novus-nvd3-153163a/build/nv.d3.js"></script> 
    <script src="novus-nvd3-153163a/examples/lib/stream_layers.js"></script> 
    <style> 
     text { 
      font: 12px sans-serif; 
     } 
     svg { 
      display: block; 
     } 
     html, body, { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
      width: 100%; 
     } 
      #chart1 { 
      width : 600px; 
      height: 400px; 
      } 
    </style> 
</head> 
<body class='with-3d-shadow with-transitions'> 
<div id="chart1" ><svg></svg></div> 

<script> 
    var dates = [new Date(2013,1,1).getTime(), new Date(2014,1,1).getTime(), new Date(2015,1,1).getTime()]; 
    //var testdata = [{"key":"Sales","values":[{"x":dates[0],"y":2972948},{"x":dates[1],"y":2659151},{"x":dates[2],"y":11381859}]},{"key":"Rentability","values":[{"x":dates[0],"y":32.9},{"x":dates[1],"y":30.6},{"x":dates[2],"y":78.5}]}]; 
    var testdata = [{"key":"Sales","values":[{"x":"2013-1-1","y":2972948},{"x":"2014-1-1","y":2659151},{"x":"2015-1-1","y":11381859}]},{"key":"Rentability","values":[{"x":"2013-1-1","y":32.9},{"x":"2014-1-1","y":30.6},{"x":"2015-1-1","y":78.5}]}]; 
    testdata[0].type = "line"; 
    testdata[0].yAxis = 1; 
    testdata[1].type = "line"; 
    testdata[1].yAxis = 2; 

    nv.addGraph(function() { 
     var chart = nv.models.multiChart() 
      .margin({top: 30, right: 60, bottom: 50, left: 70}) 
      .color(d3.scale.category10().range()); 
     chart.xAxis.tickFormat(function(d) { 
      console.log(d); 
      return d3.time.format('%Y')(new Date(d)); 
      }); 
     chart.xAxis.tickValues(dates); 
     chart.yAxis1.tickFormat(d3.format(',.1f')); 
     chart.yAxis2.tickFormat(d3.format(',.1f')); 
     d3.select('#chart1 svg') 
      .datum(testdata) 
      .transition().duration(0).call(chart); 
     return chart; 
    }); 
</script> 
</body> 
</html>

источник

2016-10-17 Juan Chô

Просьба ознакомиться с описанием. Строка с комментариями выглядит так, как будто это ** не ** работает, а строка с датами Javascript не закомментирована. –

Да, спасибо, я прокомментирую другую строку. –

Ну, к сожалению, AFAIK nv3d не поддерживает строки как даты. Несколько месяцев назад я столкнулся с той же проблемой.

основном я вижу два возможных решений здесь:

Если JavaScript является вашим основным источником данных, используйте Date.parse() для преобразования строк в даты JavaScript.
В противном случае при генерации этого JavaScript на сервере измените код сервера, чтобы отобразить даты JavaScript.

Чтобы избежать проблем с часовым поясом, вы должны внимательно прочитать документацию Date.parse(), например. здесь: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Чтобы сделать его коротким - если вы передадите строки в формате ISO в Date.parse(), вы получите значения UTC (если не указан часовой пояс). Таким образом, Date.parse("2012-03-02") может привести к 2012-03-01 23:00:00 или аналогичным эффектам при его рендеринге (используя настройки локального часового пояса, если вы не находитесь в часовой пояс GMT).

источник

2016-10-17 11:47:02

Забавно, я уже использую nv3d со строкой как даты на других примерах. –

Хорошо, почему бы вам не опубликовать это как рабочий пример здесь? Помог бы найти то, что может быть неправильно ... Насколько я помню, он может работать с некоторыми типами графиков, но с другими не ... –

Это multiBarChart, здесь строковые даты принимаются, как вы думаете, multiChart отличается? Почему некоторые диаграммы будут работать, а другие нет, ведь даты синтаксического анализа не зависят от графиков. Я использую много скриптов для рендеринга материала, я собираюсь создать рабочий мультибайт с строковыми датами, и потребуется время. –

Дата создания ошибки в nvd3

ответ

Смежные вопросы