0
Ich habe ein Liniendiagramm mit nvd3. Es funktioniert gut, wenn ich wenige Punkte habe, aber ich habe einen JavaScript-Fehler, wenn ich mehr Punkt:Nvd3 Plot mit zu vielen Punkten schlägt fehl - Kann Eigenschaft 'x' von null nicht lesen
Cannot read property 'x' of null
Hier ist der vollständige HTML-Code für den Fall mit mehr Daten, die fehlschlägt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<body>
<div id="coverage"><svg style="width:1200px;height:400px;"></svg></div>
<script>
coverage=[{"values": [{"y": 0.1, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.3", "yAxis": "1"}, {"values": [{"y": 0.1, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.67", "yAxis": "1"}, {"values": [{"y": 247677.0, "x": 0}, {"y": 250012.0, "x": 1}, {"y": 287416.0, "x": 2}, {"y": 327385.0, "x": 3}, {"y": 276739.0, "x": 4}, {"y": 247264.0, "x": 5}, {"y": 234246.0, "x": 6}, {"y": 252476.0, "x": 7}, {"y": 263584.0, "x": 8}, {"y": 244878.0, "x": 9}, {"y": 263238.0, "x": 10}, {"y": 223955.0, "x": 11}, {"y": 147838.0, "x": 12}, {"y": 216088.0, "x": 13}, {"y": 219334.0, "x": 14}, {"y": 464921.0, "x": 15}, {"y": 253147.0, "x": 16}, {"y": 143214.0, "x": 17}, {"y": 263756.0, "x": 18}, {"y": 289643.0, "x": 19}, {"y": 219631.0, "x": 20}, {"y": 280396.0, "x": 21}, {"y": 228272.0, "x": 22}, {"y": 205129.0, "x": 23}, {"y": 277684.0, "x": 24}, {"y": 336930.0, "x": 25}, {"y": 206536.0, "x": 26}, {"y": 184942.0, "x": 27}, {"y": 288391.0, "x": 28}, {"y": 265598.0, "x": 29}, {"y": 214029.0, "x": 30}, {"y": 205708.0, "x": 31}, {"y": 238413.0, "x": 32}, {"y": 173776.0, "x": 33}, {"y": 231737.0, "x": 34}, {"y": 189285.0, "x": 35}, {"y": 299765.0, "x": 36}, {"y": 254324.0, "x": 37}, {"y": 231075.0, "x": 38}, {"y": 425653.0, "x": 39}, {"y": 344885.0, "x": 40}, {"y": 394357.0, "x": 41}, {"y": 184156.0, "x": 42}, {"y": 251984.0, "x": 43}, {"y": 236977.0, "x": 44}, {"y": 280948.0, "x": 45}, {"y": 305699.0, "x": 46}, {"y": 249000.0, "x": 47}, {"y": 281287.0, "x": 48}, {"y": 247748.0, "x": 49}], "key": "qq001.2.047", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.margin({top: 30, right: 60, bottom: 100, left: 60});
var datum = coverage;
chart.xAxis
.rotateLabels(-25).tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Coverage').tickFormat(d3.format(',.02f'));
chart.showLegend(true);
d3.select('#coverage svg')
.datum(datum)
.transition().duration(500)
.attr('width', 1200)
.attr('height', 400)
.call(chart);
});
</script>
</body>
</html>Kann jemand das beheben?
Großen. Das hat es behoben. Auch bemerkt, dass ein Upgrade auf Version 1.8 von nvd3 es auch beheben würde ... – max