当使用 ajax 传递数据时，NVD3 折线图不显示 - data.map 不是一个函数
NVD3 Line Chart doesn't display when data passed using ajax - data.map is not a function
我正在尝试使用 AJAX 实现 NVD3 折线图来加载 3 个系列的 JSON 数据。
我正在使用.NET MVC在/Home/GetJsonMovingAverages上公开我的格式化JSON。
如果我复制并粘贴这些数据，它都会正确加载到图形上，但是通过 Ajax 加载它会导致它中断而没有明显的错误。
我尝试提醒数据以证明其已加载，使用回调来强制等待，在 .ajax 方法中禁用异步，以及大量其他检查，这些都没有帮助我识别或暴露问题。
这简直超出了我的范围。
下面的代码使用 d3 获取 JSON，然后尝试在图形上呈现它。这尽可能接近演示代码。我还将 JSON 数据呈现到页面，以指示何时加载以及它是正确的。(需要~5-10秒(
当 JSON 出现在页面上时，它的格式正确且正确，但不显示图表。
编辑 ： JSFIDDLE
注意：现在发现它给出了错误：TypeError：data.map 不是 nv.d3 上的函数.js(第 5476 行，第 23 行(，但仅在使用 ajax 时。(m.map in nv.d3.min.js(
(function ($) {
'use strict';
$(document).ready(function () {
// Load chart data
d3.json('/Home/GetJsonMovingAverages', function (data) {
// Renders a line chart
(function () {
nv.addGraph(function () { //This adds the chart to a global rendering queue.
var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart
$("p.jsonData").html(data); // What's going on here?!
chart.xAxis
.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) { return d3.time.format('%d/%m/%Y')(new Date(d)); });;
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
//.tickFormat(d3.format("d")); //Set Y-Axis label formatting.
d3.select("svg") //Select the document's <svg> element
.datum(data) //Attach data to the <svg> element.
.transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.
nv.utils.windowResize( //Updates the window resize event callback.
function () {
chart.update(); //Renders the chart when window is resized.
}
);
return chart; //Must return the enclosed chart variable so the global rendering queue can store it.
});
})();
});
});
})(window.jQuery);
但是，如果我复制页面上返回的数据，并将其以相同的方式粘贴到方法中，那么它完全可以正常工作：
d3.select("svg") //Select the document's <svg> element
.datum([{ key: "30 Day", color: "#ffaa00", values: [{ x: 1419984000000, y: 30.0 }, { x: 1418342400000, y: 30.0 }, { x: 1417737600000, y: 30.0 }, { x: 1417132800000, y: 30.0 }, { x: 1416873600000, y: 30.0 }, { x: 1416787200000, y: 30.0 }, { x: 1416528000000, y: 30.0 }, { x: 1416441600000, y: 30.0 }, { x: 1416355200000, y: 30.0 }, { x: 1416268800000, y: 30.0 }, { x: 1416182400000, y: 30.0 }, { x: 1415923200000, y: 30.0 }, { x: 1415836800000, y: 30.0 }, { x: 1415750400000, y: 30.0 }, { x: 1415664000000, y: 30.0 }, { x: 1415577600000, y: 30.0 }, { x: 1415318400000, y: 30.0 }, { x: 1415232000000, y: 30.0 }, { x: 1415145600000, y: 30.0 }, { x: 1415059200000, y: 30.0 }, { x: 1414972800000, y: 30.0 }, { x: 1414713600000, y: 30.0 }, { x: 1414627200000, y: 30.0 }, { x: 1414540800000, y: 30.0 }, { x: 1414454400000, y: 30.0 }, { x: 1414368000000, y: 30.0 }, { x: 1414105200000, y: 30.0 }, { x: 1414018800000, y: 30.0 }, { x: 1413932400000, y: 30.0 }, { x: 1413846000000, y: 30.0 }, { x: 1413759600000, y: 30.0 }, { x: 1413500400000, y: 30.0 }, { x: 1413414000000, y: 30.0 }, { x: 1413327600000, y: 30.0 }, { x: 1413241200000, y: 30.0 }, { x: 1413154800000, y: 30.0 }, { x: 1412895600000, y: 30.0 }, { x: 1412809200000, y: 30.0 }, { x: 1412722800000, y: 30.0 }, { x: 1412636400000, y: 30.0 }, { x: 1412550000000, y: 30.0 }, { x: 1412290800000, y: 30.0 }, { x: 1412204400000, y: 30.0 }, { x: 1412118000000, y: 30.0 }, { x: 1412031600000, y: 30.0 }, { x: 1411945200000, y: 30.0 }, { x: 1411686000000, y: 30.0 }, { x: 1411599600000, y: 30.0 }, { x: 1411513200000, y: 30.0 }, { x: 1411426800000, y: 30.0 }, { x: 1411340400000, y: 30.0 }, { x: 1411081200000, y: 30.0 }, { x: 1410994800000, y: 30.0 }, { x: 1410908400000, y: 30.0 }, { x: 1410822000000, y: 30.0 }, { x: 1410735600000, y: 30.0 }, { x: 1410476400000, y: 30.0 }, { x: 1410390000000, y: 30.0 }, { x: 1410303600000, y: 30.0 }, { x: 1410217200000, y: 30.0 }, { x: 1410130800000, y: 30.0 }, { x: 1409871600000, y: 30.0 }, { x: 1409785200000, y: 30.0 }, { x: 1409698800000, y: 30.0 }, { x: 1409612400000, y: 30.0 }, { x: 1409526000000, y: 30.0 }, { x: 1409266800000, y: 30.0 }, { x: 1409180400000, y: 30.0 }, { x: 1409094000000, y: 30.0 }, { x: 1409007600000, y: 30.0 }, { x: 1408662000000, y: 30.0 }, { x: 1408575600000, y: 30.0 }, { x: 1408489200000, y: 30.0 }, { x: 1408402800000, y: 30.0 }, { x: 1408316400000, y: 30.0 }, { x: 1408057200000, y: 30.0 }, { x: 1407970800000, y: 30.0 }, { x: 1407884400000, y: 30.0 }, { x: 1407798000000, y: 30.0 }, { x: 1407711600000, y: 30.0 }, { x: 1407452400000, y: 30.0 }, { x: 1407366000000, y: 30.0 }, { x: 1407279600000, y: 30.0 }, { x: 1407193200000, y: 30.0 }, { x: 1407106800000, y: 30.0 }, { x: 1406847600000, y: 30.0 }, { x: 1406761200000, y: 30.0 }, { x: 1406674800000, y: 30.0 }, { x: 1406588400000, y: 30.0 }, { x: 1406502000000, y: 30.0 }, { x: 1406242800000, y: 30.0 }, { x: 1406156400000, y: 30.0 }, { x: 1406070000000, y: 30.0 }, { x: 1405983600000, y: 30.0 }, { x: 1405897200000, y: 30.0 }, { x: 1405638000000, y: 30.0 }, { x: 1405551600000, y: 30.0 }, { x: 1405465200000, y: 30.0 }, { x: 1405378800000, y: 30.0 }, { x: 1405292400000, y: 30.0 }, { x: 1405033200000, y: 30.0 }, { x: 1404946800000, y: 30.0 }, { x: 1404860400000, y: 30.0 }, { x: 1404774000000, y: 30.0 }, { x: 1404687600000, y: 30.0 }, { x: 1404428400000, y: 30.0 }, { x: 1404342000000, y: 30.0 }, { x: 1404255600000, y: 30.0 }, { x: 1404169200000, y: 30.0 }, { x: 1404082800000, y: 30.0 }, { x: 1403823600000, y: 30.0 }, { x: 1403737200000, y: 30.0 }, { x: 1403650800000, y: 30.0 }, { x: 1403564400000, y: 30.0 }, { x: 1403478000000, y: 30.0 }, { x: 1403218800000, y: 30.0 }, { x: 1403132400000, y: 30.0 }, { x: 1403046000000, y: 30.0 }, { x: 1402959600000, y: 30.0 }, { x: 1402873200000, y: 30.0 }, { x: 1402614000000, y: 30.0 }, { x: 1402527600000, y: 30.0 }, { x: 1402441200000, y: 30.0 }, { x: 1402354800000, y: 30.0 }, { x: 1402268400000, y: 30.0 }, { x: 1402095600000, y: 30.0 }, { x: 1402009200000, y: 30.0 }, { x: 1401922800000, y: 30.0 }, { x: 1401836400000, y: 30.0 }, { x: 1401750000000, y: 30.0 }, { x: 1401663600000, y: 30.0 }, { x: 1401490800000, y: 30.0 }, { x: 1401404400000, y: 30.0 }, { x: 1401318000000, y: 30.0 }, { x: 1401231600000, y: 30.0 }, { x: 1401145200000, y: 30.0 }, { x: 1400799600000, y: 30.0 }, { x: 1400713200000, y: 30.0 }, { x: 1400626800000, y: 30.0 }, { x: 1400540400000, y: 30.0 }, { x: 1400454000000, y: 30.0 }, { x: 1400194800000, y: 30.0 }, { x: 1400108400000, y: 30.0 }, { x: 1400022000000, y: 30.0 }, { x: 1399935600000, y: 30.0 }, { x: 1399849200000, y: 30.0 }, { x: 1399590000000, y: 30.0 }, { x: 1399503600000, y: 30.0 }, { x: 1399417200000, y: 30.0 }, { x: 1399330800000, y: 30.0 }, { x: 1398985200000, y: 30.0 }, { x: 1398898800000, y: 30.0 }, { x: 1398812400000, y: 30.0 }, { x: 1398726000000, y: 30.0 }, { x: 1398639600000, y: 30.0 }, { x: 1398380400000, y: 30.0 }, { x: 1398294000000, y: 30.0 }, { x: 1398207600000, y: 30.0 }, { x: 1398121200000, y: 30.0 }, { x: 1397948400000, y: 30.0 }, { x: 1397775600000, y: 30.0 }, { x: 1397689200000, y: 30.0 }, { x: 1397602800000, y: 30.0 }, { x: 1397516400000, y: 30.0 }, { x: 1397430000000, y: 30.0 }, { x: 1397170800000, y: 30.0 }, { x: 1397084400000, y: 30.0 }, { x: 1396998000000, y: 30.0 }, { x: 1396911600000, y: 30.0 }, { x: 1396825200000, y: 30.0 }, { x: 1396566000000, y: 30.0 }, { x: 1396479600000, y: 30.0 }, { x: 1396393200000, y: 30.0 }, { x: 1396306800000, y: 30.0 }, { x: 1396220400000, y: 30.0 }, { x: 1395964800000, y: 30.0 }, { x: 1395878400000, y: 30.0 }, { x: 1395792000000, y: 30.0 }, { x: 1395705600000, y: 30.0 }, { x: 1395619200000, y: 30.0 }, { x: 1395360000000, y: 30.0 }, { x: 1395273600000, y: 30.0 }, { x: 1395187200000, y: 30.0 }, { x: 1395100800000, y: 30.0 }, { x: 1395014400000, y: 30.0 }, { x: 1394755200000, y: 30.0 }, { x: 1394668800000, y: 30.0 }, { x: 1394582400000, y: 30.0 }, { x: 1394496000000, y: 30.0 }, { x: 1394323200000, y: 30.0 }, { x: 1394150400000, y: 30.0 }, { x: 1394064000000, y: 30.0 }, { x: 1393977600000, y: 30.0 }, { x: 1393891200000, y: 30.0 }, { x: 1393804800000, y: 30.0 }, { x: 1393718400000, y: 30.0 }, { x: 1393632000000, y: 30.0 }, { x: 1393545600000, y: 30.0 }, { x: 1393459200000, y: 30.0 }, { x: 1393372800000, y: 30.0 }, { x: 1393286400000, y: 30.0 }, { x: 1393200000000, y: 30.0 }, { x: 1392940800000, y: 30.0 }, { x: 1392854400000, y: 30.0 }, { x: 1392768000000, y: 30.0 }, { x: 1392681600000, y: 30.0 }, { x: 1392595200000, y: 30.0 }, { x: 1392336000000, y: 30.0 }, { x: 1392249600000, y: 30.0 }, { x: 1392163200000, y: 30.0 }, { x: 1392076800000, y: 30.0 }, { x: 1391990400000, y: 30.0 }, { x: 1391731200000, y: 30.0 }, { x: 1391644800000, y: 30.0 }, { x: 1391558400000, y: 30.0 }, { x: 1391472000000, y: 30.0 }, { x: 1391385600000, y: 30.0 }, { x: 1391299200000, y: 30.0 }, { x: 1391212800000, y: 30.0 }, { x: 1391126400000, y: 30.0 }, { x: 1391040000000, y: 30.0 }, { x: 1390953600000, y: 30.0 }, { x: 1390867200000, y: 30.0 }, { x: 1390780800000, y: 30.0 }, { x: 1390521600000, y: 30.0 }, { x: 1390435200000, y: 30.0 }, { x: 1390348800000, y: 30.0 }, { x: 1390262400000, y: 30.0 }, { x: 1390176000000, y: 30.0 }, { x: 1389916800000, y: 30.0 }, { x: 1389830400000, y: 30.0 }, { x: 1389744000000, y: 30.0 }, { x: 1389657600000, y: 30.0 }, { x: 1389571200000, y: 30.0 }, { x: 1389312000000, y: 30.0 }, { x: 1389225600000, y: 30.0 }, { x: 1389139200000, y: 30.0 }, { x: 1389052800000, y: 30.0 }, { x: 1388966400000, y: 30.0 }, { x: 1388707200000, y: 30.0 }, { x: 1388534400000, y: 30.0 }] }, { key: "60 Day", color: "#00ffaa", values: [{ x: 1419984000000, y: 60.0 }, { x: 1418342400000, y: 60.0 }, { x: 1417737600000, y: 60.0 }, { x: 1417132800000, y: 60.0 }, { x: 1416873600000, y: 60.0 }, { x: 1416787200000, y: 60.0 }, { x: 1416528000000, y: 60.0 }, { x: 1416441600000, y: 60.0 }, { x: 1416355200000, y: 60.0 }, { x: 1416268800000, y: 60.0 }, { x: 1416182400000, y: 60.0 }, { x: 1415923200000, y: 60.0 }, { x: 1415836800000, y: 60.0 }, { x: 1415750400000, y: 60.0 }, { x: 1415664000000, y: 60.0 }, { x: 1415577600000, y: 60.0 }, { x: 1415318400000, y: 60.0 }, { x: 1415232000000, y: 60.0 }, { x: 1415145600000, y: 60.0 }, { x: 1415059200000, y: 60.0 }, { x: 1414972800000, y: 60.0 }, { x: 1414713600000, y: 60.0 }, { x: 1414627200000, y: 60.0 }, { x: 1414540800000, y: 60.0 }, { x: 1414454400000, y: 60.0 }, { x: 1414368000000, y: 60.0 }, { x: 1414105200000, y: 60.0 }, { x: 1414018800000, y: 60.0 }, { x: 1413932400000, y: 60.0 }, { x: 1413846000000, y: 60.0 }, { x: 1413759600000, y: 60.0 }, { x: 1413500400000, y: 60.0 }, { x: 1413414000000, y: 60.0 }, { x: 1413327600000, y: 60.0 }, { x: 1413241200000, y: 60.0 }, { x: 1413154800000, y: 60.0 }, { x: 1412895600000, y: 60.0 }, { x: 1412809200000, y: 60.0 }, { x: 1412722800000, y: 60.0 }, { x: 1412636400000, y: 60.0 }, { x: 1412550000000, y: 60.0 }, { x: 1412290800000, y: 60.0 }, { x: 1412204400000, y: 60.0 }, { x: 1412118000000, y: 60.0 }, { x: 1412031600000, y: 60.0 }, { x: 1411945200000, y: 60.0 }, { x: 1411686000000, y: 60.0 }, { x: 1411599600000, y: 60.0 }, { x: 1411513200000, y: 60.0 }, { x: 1411426800000, y: 60.0 }, { x: 1411340400000, y: 60.0 }, { x: 1411081200000, y: 60.0 }, { x: 1410994800000, y: 60.0 }, { x: 1410908400000, y: 60.0 }, { x: 1410822000000, y: 60.0 }, { x: 1410735600000, y: 60.0 }, { x: 1410476400000, y: 60.0 }, { x: 1410390000000, y: 60.0 }, { x: 1410303600000, y: 60.0 }, { x: 1410217200000, y: 60.0 }, { x: 1410130800000, y: 60.0 }, { x: 1409871600000, y: 60.0 }, { x: 1409785200000, y: 60.0 }, { x: 1409698800000, y: 60.0 }, { x: 1409612400000, y: 60.0 }, { x: 1409526000000, y: 60.0 }, { x: 1409266800000, y: 60.0 }, { x: 1409180400000, y: 60.0 }, { x: 1409094000000, y: 60.0 }, { x: 1409007600000, y: 60.0 }, { x: 1408662000000, y: 60.0 }, { x: 1408575600000, y: 60.0 }, { x: 1408489200000, y: 60.0 }, { x: 1408402800000, y: 60.0 }, { x: 1408316400000, y: 60.0 }, { x: 1408057200000, y: 60.0 }, { x: 1407970800000, y: 60.0 }, { x: 1407884400000, y: 60.0 }, { x: 1407798000000, y: 60.0 }, { x: 1407711600000, y: 60.0 }, { x: 1407452400000, y: 60.0 }, { x: 1407366000000, y: 60.0 }, { x: 1407279600000, y: 60.0 }, { x: 1407193200000, y: 60.0 }, { x: 1407106800000, y: 60.0 }, { x: 1406847600000, y: 60.0 }, { x: 1406761200000, y: 60.0 }, { x: 1406674800000, y: 60.0 }, { x: 1406588400000, y: 60.0 }, { x: 1406502000000, y: 60.0 }, { x: 1406242800000, y: 60.0 }, { x: 1406156400000, y: 60.0 }, { x: 1406070000000, y: 60.0 }, { x: 1405983600000, y: 60.0 }, { x: 1405897200000, y: 60.0 }, { x: 1405638000000, y: 60.0 }, { x: 1405551600000, y: 60.0 }, { x: 1405465200000, y: 60.0 }, { x: 1405378800000, y: 60.0 }, { x: 1405292400000, y: 60.0 }, { x: 1405033200000, y: 60.0 }, { x: 1404946800000, y: 60.0 }, { x: 1404860400000, y: 60.0 }, { x: 1404774000000, y: 60.0 }, { x: 1404687600000, y: 60.0 }, { x: 1404428400000, y: 60.0 }, { x: 1404342000000, y: 60.0 }, { x: 1404255600000, y: 60.0 }, { x: 1404169200000, y: 60.0 }, { x: 1404082800000, y: 60.0 }, { x: 1403823600000, y: 60.0 }, { x: 1403737200000, y: 60.0 }, { x: 1403650800000, y: 60.0 }, { x: 1403564400000, y: 60.0 }, { x: 1403478000000, y: 60.0 }, { x: 1403218800000, y: 60.0 }, { x: 1403132400000, y: 60.0 }, { x: 1403046000000, y: 60.0 }, { x: 1402959600000, y: 60.0 }, { x: 1402873200000, y: 60.0 }, { x: 1402614000000, y: 60.0 }, { x: 1402527600000, y: 60.0 }, { x: 1402441200000, y: 60.0 }, { x: 1402354800000, y: 60.0 }, { x: 1402268400000, y: 60.0 }, { x: 1402095600000, y: 60.0 }, { x: 1402009200000, y: 60.0 }, { x: 1401922800000, y: 60.0 }, { x: 1401836400000, y: 60.0 }, { x: 1401750000000, y: 60.0 }, { x: 1401663600000, y: 60.0 }, { x: 1401490800000, y: 60.0 }, { x: 1401404400000, y: 60.0 }, { x: 1401318000000, y: 60.0 }, { x: 1401231600000, y: 60.0 }, { x: 1401145200000, y: 60.0 }, { x: 1400799600000, y: 60.0 }, { x: 1400713200000, y: 60.0 }, { x: 1400626800000, y: 60.0 }, { x: 1400540400000, y: 60.0 }, { x: 1400454000000, y: 60.0 }, { x: 1400194800000, y: 60.0 }, { x: 1400108400000, y: 60.0 }, { x: 1400022000000, y: 60.0 }, { x: 1399935600000, y: 60.0 }, { x: 1399849200000, y: 60.0 }, { x: 1399590000000, y: 60.0 }, { x: 1399503600000, y: 60.0 }, { x: 1399417200000, y: 60.0 }, { x: 1399330800000, y: 60.0 }, { x: 1398985200000, y: 60.0 }, { x: 1398898800000, y: 60.0 }, { x: 1398812400000, y: 60.0 }, { x: 1398726000000, y: 60.0 }, { x: 1398639600000, y: 60.0 }, { x: 1398380400000, y: 60.0 }, { x: 1398294000000, y: 60.0 }, { x: 1398207600000, y: 60.0 }, { x: 1398121200000, y: 60.0 }, { x: 1397948400000, y: 60.0 }, { x: 1397775600000, y: 60.0 }, { x: 1397689200000, y: 60.0 }, { x: 1397602800000, y: 60.0 }, { x: 1397516400000, y: 60.0 }, { x: 1397430000000, y: 60.0 }, { x: 1397170800000, y: 60.0 }, { x: 1397084400000, y: 60.0 }, { x: 1396998000000, y: 60.0 }, { x: 1396911600000, y: 60.0 }, { x: 1396825200000, y: 60.0 }, { x: 1396566000000, y: 60.0 }, { x: 1396479600000, y: 60.0 }, { x: 1396393200000, y: 60.0 }, { x: 1396306800000, y: 60.0 }, { x: 1396220400000, y: 60.0 }, { x: 1395964800000, y: 60.0 }, { x: 1395878400000, y: 60.0 }, { x: 1395792000000, y: 60.0 }, { x: 1395705600000, y: 60.0 }, { x: 1395619200000, y: 60.0 }, { x: 1395360000000, y: 60.0 }, { x: 1395273600000, y: 60.0 }, { x: 1395187200000, y: 60.0 }, { x: 1395100800000, y: 60.0 }, { x: 1395014400000, y: 60.0 }, { x: 1394755200000, y: 60.0 }, { x: 1394668800000, y: 60.0 }, { x: 1394582400000, y: 60.0 }, { x: 1394496000000, y: 60.0 }, { x: 1394323200000, y: 60.0 }, { x: 1394150400000, y: 60.0 }, { x: 1394064000000, y: 60.0 }, { x: 1393977600000, y: 60.0 }, { x: 1393891200000, y: 60.0 }, { x: 1393804800000, y: 60.0 }, { x: 1393718400000, y: 60.0 }, { x: 1393632000000, y: 60.0 }, { x: 1393545600000, y: 60.0 }, { x: 1393459200000, y: 60.0 }, { x: 1393372800000, y: 60.0 }, { x: 1393286400000, y: 60.0 }, { x: 1393200000000, y: 60.0 }, { x: 1392940800000, y: 60.0 }, { x: 1392854400000, y: 60.0 }, { x: 1392768000000, y: 60.0 }, { x: 1392681600000, y: 60.0 }, { x: 1392595200000, y: 60.0 }, { x: 1392336000000, y: 60.0 }, { x: 1392249600000, y: 60.0 }, { x: 1392163200000, y: 60.0 }, { x: 1392076800000, y: 60.0 }, { x: 1391990400000, y: 60.0 }, { x: 1391731200000, y: 60.0 }, { x: 1391644800000, y: 60.0 }, { x: 1391558400000, y: 60.0 }, { x: 1391472000000, y: 60.0 }, { x: 1391385600000, y: 60.0 }, { x: 1391299200000, y: 60.0 }, { x: 1391212800000, y: 60.0 }, { x: 1391126400000, y: 60.0 }, { x: 1391040000000, y: 60.0 }, { x: 1390953600000, y: 60.0 }, { x: 1390867200000, y: 60.0 }, { x: 1390780800000, y: 60.0 }, { x: 1390521600000, y: 60.0 }, { x: 1390435200000, y: 60.0 }, { x: 1390348800000, y: 60.0 }, { x: 1390262400000, y: 60.0 }, { x: 1390176000000, y: 60.0 }, { x: 1389916800000, y: 60.0 }, { x: 1389830400000, y: 60.0 }, { x: 1389744000000, y: 60.0 }, { x: 1389657600000, y: 60.0 }, { x: 1389571200000, y: 60.0 }, { x: 1389312000000, y: 60.0 }, { x: 1389225600000, y: 60.0 }, { x: 1389139200000, y: 60.0 }, { x: 1389052800000, y: 60.0 }, { x: 1388966400000, y: 60.0 }, { x: 1388707200000, y: 60.0 }, { x: 1388534400000, y: 60.0 }] }, { key: "90 Day", color: "#aa00ff", values: [{ x: 1419984000000, y: 90.0 }, { x: 1418342400000, y: 90.0 }, { x: 1417737600000, y: 90.0 }, { x: 1417132800000, y: 90.0 }, { x: 1416873600000, y: 90.0 }, { x: 1416787200000, y: 90.0 }, { x: 1416528000000, y: 90.0 }, { x: 1416441600000, y: 90.0 }, { x: 1416355200000, y: 90.0 }, { x: 1416268800000, y: 90.0 }, { x: 1416182400000, y: 90.0 }, { x: 1415923200000, y: 90.0 }, { x: 1415836800000, y: 90.0 }, { x: 1415750400000, y: 90.0 }, { x: 1415664000000, y: 90.0 }, { x: 1415577600000, y: 90.0 }, { x: 1415318400000, y: 90.0 }, { x: 1415232000000, y: 90.0 }, { x: 1415145600000, y: 90.0 }, { x: 1415059200000, y: 90.0 }, { x: 1414972800000, y: 90.0 }, { x: 1414713600000, y: 90.0 }, { x: 1414627200000, y: 90.0 }, { x: 1414540800000, y: 90.0 }, { x: 1414454400000, y: 90.0 }, { x: 1414368000000, y: 90.0 }, { x: 1414105200000, y: 90.0 }, { x: 1414018800000, y: 90.0 }, { x: 1413932400000, y: 90.0 }, { x: 1413846000000, y: 90.0 }, { x: 1413759600000, y: 90.0 }, { x: 1413500400000, y: 90.0 }, { x: 1413414000000, y: 90.0 }, { x: 1413327600000, y: 90.0 }, { x: 1413241200000, y: 90.0 }, { x: 1413154800000, y: 90.0 }, { x: 1412895600000, y: 90.0 }, { x: 1412809200000, y: 90.0 }, { x: 1412722800000, y: 90.0 }, { x: 1412636400000, y: 90.0 }, { x: 1412550000000, y: 90.0 }, { x: 1412290800000, y: 90.0 }, { x: 1412204400000, y: 90.0 }, { x: 1412118000000, y: 90.0 }, { x: 1412031600000, y: 90.0 }, { x: 1411945200000, y: 90.0 }, { x: 1411686000000, y: 90.0 }, { x: 1411599600000, y: 90.0 }, { x: 1411513200000, y: 90.0 }, { x: 1411426800000, y: 90.0 }, { x: 1411340400000, y: 90.0 }, { x: 1411081200000, y: 90.0 }, { x: 1410994800000, y: 90.0 }, { x: 1410908400000, y: 90.0 }, { x: 1410822000000, y: 90.0 }, { x: 1410735600000, y: 90.0 }, { x: 1410476400000, y: 90.0 }, { x: 1410390000000, y: 90.0 }, { x: 1410303600000, y: 90.0 }, { x: 1410217200000, y: 90.0 }, { x: 1410130800000, y: 90.0 }, { x: 1409871600000, y: 90.0 }, { x: 1409785200000, y: 90.0 }, { x: 1409698800000, y: 90.0 }, { x: 1409612400000, y: 90.0 }, { x: 1409526000000, y: 90.0 }, { x: 1409266800000, y: 90.0 }, { x: 1409180400000, y: 90.0 }, { x: 1409094000000, y: 90.0 }, { x: 1409007600000, y: 90.0 }, { x: 1408662000000, y: 90.0 }, { x: 1408575600000, y: 90.0 }, { x: 1408489200000, y: 90.0 }, { x: 1408402800000, y: 90.0 }, { x: 1408316400000, y: 90.0 }, { x: 1408057200000, y: 90.0 }, { x: 1407970800000, y: 90.0 }, { x: 1407884400000, y: 90.0 }, { x: 1407798000000, y: 90.0 }, { x: 1407711600000, y: 90.0 }, { x: 1407452400000, y: 90.0 }, { x: 1407366000000, y: 90.0 }, { x: 1407279600000, y: 90.0 }, { x: 1407193200000, y: 90.0 }, { x: 1407106800000, y: 90.0 }, { x: 1406847600000, y: 90.0 }, { x: 1406761200000, y: 90.0 }, { x: 1406674800000, y: 90.0 }, { x: 1406588400000, y: 90.0 }, { x: 1406502000000, y: 90.0 }, { x: 1406242800000, y: 90.0 }, { x: 1406156400000, y: 90.0 }, { x: 1406070000000, y: 90.0 }, { x: 1405983600000, y: 90.0 }, { x: 1405897200000, y: 90.0 }, { x: 1405638000000, y: 90.0 }, { x: 1405551600000, y: 90.0 }, { x: 1405465200000, y: 90.0 }, { x: 1405378800000, y: 90.0 }, { x: 1405292400000, y: 90.0 }, { x: 1405033200000, y: 90.0 }, { x: 1404946800000, y: 90.0 }, { x: 1404860400000, y: 90.0 }, { x: 1404774000000, y: 90.0 }, { x: 1404687600000, y: 90.0 }, { x: 1404428400000, y: 90.0 }, { x: 1404342000000, y: 90.0 }, { x: 1404255600000, y: 90.0 }, { x: 1404169200000, y: 90.0 }, { x: 1404082800000, y: 90.0 }, { x: 1403823600000, y: 90.0 }, { x: 1403737200000, y: 90.0 }, { x: 1403650800000, y: 90.0 }, { x: 1403564400000, y: 90.0 }, { x: 1403478000000, y: 90.0 }, { x: 1403218800000, y: 90.0 }, { x: 1403132400000, y: 90.0 }, { x: 1403046000000, y: 90.0 }, { x: 1402959600000, y: 90.0 }, { x: 1402873200000, y: 90.0 }, { x: 1402614000000, y: 90.0 }, { x: 1402527600000, y: 90.0 }, { x: 1402441200000, y: 90.0 }, { x: 1402354800000, y: 90.0 }, { x: 1402268400000, y: 90.0 }, { x: 1402095600000, y: 90.0 }, { x: 1402009200000, y: 90.0 }, { x: 1401922800000, y: 90.0 }, { x: 1401836400000, y: 90.0 }, { x: 1401750000000, y: 90.0 }, { x: 1401663600000, y: 90.0 }, { x: 1401490800000, y: 90.0 }, { x: 1401404400000, y: 90.0 }, { x: 1401318000000, y: 90.0 }, { x: 1401231600000, y: 90.0 }, { x: 1401145200000, y: 90.0 }, { x: 1400799600000, y: 90.0 }, { x: 1400713200000, y: 90.0 }, { x: 1400626800000, y: 90.0 }, { x: 1400540400000, y: 90.0 }, { x: 1400454000000, y: 90.0 }, { x: 1400194800000, y: 90.0 }, { x: 1400108400000, y: 90.0 }, { x: 1400022000000, y: 90.0 }, { x: 1399935600000, y: 90.0 }, { x: 1399849200000, y: 90.0 }, { x: 1399590000000, y: 90.0 }, { x: 1399503600000, y: 90.0 }, { x: 1399417200000, y: 90.0 }, { x: 1399330800000, y: 90.0 }, { x: 1398985200000, y: 90.0 }, { x: 1398898800000, y: 90.0 }, { x: 1398812400000, y: 90.0 }, { x: 1398726000000, y: 90.0 }, { x: 1398639600000, y: 90.0 }, { x: 1398380400000, y: 90.0 }, { x: 1398294000000, y: 90.0 }, { x: 1398207600000, y: 90.0 }, { x: 1398121200000, y: 90.0 }, { x: 1397948400000, y: 90.0 }, { x: 1397775600000, y: 90.0 }, { x: 1397689200000, y: 90.0 }, { x: 1397602800000, y: 90.0 }, { x: 1397516400000, y: 90.0 }, { x: 1397430000000, y: 90.0 }, { x: 1397170800000, y: 90.0 }, { x: 1397084400000, y: 90.0 }, { x: 1396998000000, y: 90.0 }, { x: 1396911600000, y: 90.0 }, { x: 1396825200000, y: 90.0 }, { x: 1396566000000, y: 90.0 }, { x: 1396479600000, y: 90.0 }, { x: 1396393200000, y: 90.0 }, { x: 1396306800000, y: 90.0 }, { x: 1396220400000, y: 90.0 }, { x: 1395964800000, y: 90.0 }, { x: 1395878400000, y: 90.0 }, { x: 1395792000000, y: 90.0 }, { x: 1395705600000, y: 90.0 }, { x: 1395619200000, y: 90.0 }, { x: 1395360000000, y: 90.0 }, { x: 1395273600000, y: 90.0 }, { x: 1395187200000, y: 90.0 }, { x: 1395100800000, y: 90.0 }, { x: 1395014400000, y: 90.0 }, { x: 1394755200000, y: 90.0 }, { x: 1394668800000, y: 90.0 }, { x: 1394582400000, y: 90.0 }, { x: 1394496000000, y: 90.0 }, { x: 1394323200000, y: 90.0 }, { x: 1394150400000, y: 90.0 }, { x: 1394064000000, y: 90.0 }, { x: 1393977600000, y: 90.0 }, { x: 1393891200000, y: 90.0 }, { x: 1393804800000, y: 90.0 }, { x: 1393718400000, y: 90.0 }, { x: 1393632000000, y: 90.0 }, { x: 1393545600000, y: 90.0 }, { x: 1393459200000, y: 90.0 }, { x: 1393372800000, y: 90.0 }, { x: 1393286400000, y: 90.0 }, { x: 1393200000000, y: 90.0 }, { x: 1392940800000, y: 90.0 }, { x: 1392854400000, y: 90.0 }, { x: 1392768000000, y: 90.0 }, { x: 1392681600000, y: 90.0 }, { x: 1392595200000, y: 90.0 }, { x: 1392336000000, y: 90.0 }, { x: 1392249600000, y: 90.0 }, { x: 1392163200000, y: 90.0 }, { x: 1392076800000, y: 90.0 }, { x: 1391990400000, y: 90.0 }, { x: 1391731200000, y: 90.0 }, { x: 1391644800000, y: 90.0 }, { x: 1391558400000, y: 90.0 }, { x: 1391472000000, y: 90.0 }, { x: 1391385600000, y: 90.0 }, { x: 1391299200000, y: 90.0 }, { x: 1391212800000, y: 90.0 }, { x: 1391126400000, y: 90.0 }, { x: 1391040000000, y: 90.0 }, { x: 1390953600000, y: 90.0 }, { x: 1390867200000, y: 90.0 }, { x: 1390780800000, y: 90.0 }, { x: 1390521600000, y: 90.0 }, { x: 1390435200000, y: 90.0 }, { x: 1390348800000, y: 90.0 }, { x: 1390262400000, y: 90.0 }, { x: 1390176000000, y: 90.0 }, { x: 1389916800000, y: 90.0 }, { x: 1389830400000, y: 90.0 }, { x: 1389744000000, y: 90.0 }, { x: 1389657600000, y: 90.0 }, { x: 1389571200000, y: 90.0 }, { x: 1389312000000, y: 90.0 }, { x: 1389225600000, y: 90.0 }, { x: 1389139200000, y: 90.0 }, { x: 1389052800000, y: 90.0 }, { x: 1388966400000, y: 90.0 }, { x: 1388707200000, y: 90.0 }, { x: 1388534400000, y: 90.0 }] }]) //Attach data to the <svg> element.
.transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.
如果不清楚，我的问题是：如何使用 AJAX 加载 NVD3 折线图？(没有这些问题(提前感谢您提供的任何建议/帮助。
编辑2：答案后的新代码+工作硬编码JSON的示例
d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (data) {
// Renders a line chart
nv.addGraph(function () {
var chart = nv.models.lineChart()
.options({
margin: { left: 10, bottom: 10 },
x: function (d, i) { return i },
showXAxis: true,
showYAxis: true,
tooltips: true,
x: function (d, i) { return i },
transitionDuration: 500
});
chart.useInteractiveGuideline(true);
chart.xAxis.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d));
});
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
//.tickFormat(d3.format("d")); //Set Y-Axis label formatting.
d3.select('#nvd3-line svg') //Select the <svg> element you want to render the chart in.
.datum([{
"key": "30 Day",
"values": [{
"x": 1417132800000,
"y": 35
}, {
"x": 1417737600000,
"y": 30
}, {
"x": 1418342400000,
"y": 40
}, {
"x": 1419984000000,
"y": 50
}]
}, {
"key": "60 Day",
"values": [{
"x": 1417132800000,
"y": 40
}, {
"x": 1417737600000,
"y": 50
}, {
"x": 1418342400000,
"y": 45
}, {
"x": 1419984000000,
"y": 40
}]
}, {
"key": "90 Day",
"values": [{
"x": 1417132800000,
"y": 50
}, {
"x": 1417737600000,
"y": 70
}, {
"x": 1418342400000,
"y": 50
}, {
"x": 1419984000000,
"y": 30
}]
}]) // WORKING - NOT AJAX //Populate the <svg> element with chart data...
//.datum(data) // NOT WORKING - AJAX //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
// THIS CODE ONLY NEEDS TO BE INITIATED ONCE
nv.utils.windowResize(chart.update);
nv.utils.windowResize(function () { d3.select('#nvd3-line svg').call(chart) });
chart.dispatch.on('stateChange', function (e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
});
您的 JSON 无效，尽管 NVD3 喜欢几种不同格式的它，但 d3.json ajax 调用以特定的方式喜欢它。
字符串周围缺少双引号，如果将 JSON 格式化为如下所示，则当您从 AJAX 调用中提取它时它将起作用。
正确格式的 JSON 代码段 -
[
{
"key": "30 Day",
"color": "#ffaa00",
"values": [
{
"x": 1419984000000,
"y": 30
},
{
"x": 1418342400000,
"y": 30
},
{
"x": 1417737600000,
"y": 30
},
{
"x": 1417132800000,
"y": 30
}
]
}
]
结果 - 有效的 JSON
我找到了解决方案：
jQuery.parseJSON(myAjaxLoadedData);
看起来 ajax 加载数据的问题在于它是一个字符串。我很困惑，因为我遵循了我能找到的所有示例，它们似乎和我一样加载它。
这是我的完整工作代码：
// Load chart data
d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (error, myData) {
// Renders a line chart
(function () {
nv.addGraph(function () { //This adds the chart to a global rendering queue.
var chart = nv.models.lineChart() //Create instance of nvd3 lineChart
.useInteractiveGuideline(true);
chart.xAxis
.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) { return d3.time.format('%d/%m/%Y')(new Date(d)); });
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
d3.select("svg") //Select the document's <svg> element
.datum(jQuery.parseJSON(myData)) //Attach data to the <svg> element.
.call(chart); //Define transition and pass the d3.selection to our lineChart.
// THIS CODE ONLY NEEDS TO BE INITIATED ONCE
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function () { d3.select('svg').call(chart); });
//chart.dispatch.on('stateChange', function (e) {
// nv.log('New State:', JSON.stringify(e));
return chart; //Must return the enclosed chart variable so the global rendering queue can store it.
//});
});
})();
});
非常感谢Engl12为这个解决方案所做的努力
好的 请尝试这个编辑过的脚本来生成您的图形并获取 JSON，它适用于您的 JSFiddle 中的 JSON 数据。
d3.json('........php', function (data) {
// Renders a line chart
nv.addGraph(function() {
var chart = nv.models.lineChart()
.options({
margin: {left: 10, bottom: 10},
x: function(d,i) { return i},
showXAxis: true,
showYAxis: true,
tooltips: true,
x: function(d,i) { return i},
transitionDuration: 500
});
chart.useInteractiveGuideline(true);
chart.xAxis.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d));
});
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
//.tickFormat(d3.format("d")); //Set Y-Axis label formatting.
d3.select('#chart1 svg') //Select the <svg> element you want to render the chart in.
.datum(data) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
// THIS CODE ONLY NEEDS TO BE INITIATED ONCE
nv.utils.windowResize(chart.update);
nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
});
调用 html 中的图表 -
<table>
<tr>
<td id="chart1">
<svg></svg>
</td>
</tr>
</table>
相关文章：
- Ember Data DS.Model's set函数不起作用
- Extending Ext.data.NodeInterface
- 在下划线中使用_(obj）.map(callback）和_.map(obj，callback）之间的区别
- 使用map来检查是否为真'不起作用
- 如何获取$data.Entity的密钥
- 回调函数中传递参数的困难(Google Map API Markers）
- jQuery可以't获取data-*属性值，返回undefined
- Query JS Ext.data.Store
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- React.jsthis.props.data.map(）不是函数
- ReactJS:this.props.data.map 不是一个函数
- 当使用 ajax 传递数据时，NVD3 折线图不显示 - data.map 不是一个函数
- 从map.data类获取标记使用geojson-google-maps
- 未捕获类型错误:this.props.data.map不是函数(使用超级代理）
- Nvd3js - TypeError: data.Map不是函数
- 未捕获的类型错误:this.state.data.map不是一个函数
- Google Maps API - Map.data scope issue
- 类型错误:'未定义'不是对象(正在评估'promise.data.map'）
- Uncaught TypeError: this.props.data.map不是一个函数
- 未捕获的类型错误:this.props.data.map不是函数
