javascript — досадная проблема с AJAX и NVD3.JS Ошибка необученного объекта

Question

javascript — досадная проблема с AJAX и NVD3.JS Ошибка необученного объекта

Я работаю над сценарием, чтобы иметь возможность вызывать данные для моей диаграммы из внешнего файла php.

Я попытался просто сбросить данные в график вручную, и он работает совершенно нормально.

Но когда я выполняю ajax-вызов для извлечения данных, я получаю следующую ошибку:

Uncaught TypeError: Object
[{«key»: «O2», «values»: [{«x»: «NRW», «y»: 1}, {«x»: «WRW
«,» y «: 3}]}, {» key «:» O1 «,» values »: [{» x «:» ME «,» y «: 1}, {» x «:» FST
«,» y «: 1}, {» x «:» SRW «,» y «: 1}, {» x «:» LRW
«,» y «: 4}]}, {» key «:» O3 «,» values »: [{» x «:» SEDG «,» y «: 1}, {» x «:» DLDW »
«,» y «: 1}, {» x «:» SM «,» y «: 1}, {» x «:» DEDDN «,» y «: 1}, {» x «:» LEEW »
«,» y «: 3}]}, {» key «:» O4 «,» values »: [{» x «:» BUEC «,» y «: 2}]}];

не имеет метода ‘map’`

Вот часть кода моих страниц —

<script>

var update = function() {var jsonData = $.ajax({
url: "http://localhost/getData.php",
async: false
}).responseText;var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0)      //Angle to rotate x-axis labels.
.transitionDuration(250)
.showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24)    //Distance between each group of bars.

;

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

chart.x (function(d) { return d.x; })chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);

d3.select('#chart1M svg')
.datum(jsonData)
.call(chart);

return chart;
});
};

</script>

Любая помощь высоко ценится

0

ajax d3.js javascript nvd3.js php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Как сказано в комментариях @bart_s, ваш JSON недействителен (если не должен заканчиваться точкой с запятой). Вот удобный инструмент для проверки вашего JSON: http://jsonlint.com/.

Это вне пути, у вас есть большие проблемы. Почему вы используете JQuery $.ajax когда d3 предоставляет лучший способ сделать звонок? Почему ваш AJAX синхронный вызов? Кроме того, вам не следует использовать абсолютный URL-адрес в вызове AJAX, если только вам это действительно не нужно. Тот http://localhost бит не удастся, когда вы развернете это.

Вот как бы я написал это:

d3.json("getData.php", function(jsonData) {  // assuming getData.php is served out of the same directory as the javascript

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(250)
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.

;

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

chart.x(function(d) {
return d.x;
})chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);

d3.select('#chart1M svg')
.datum(jsonData)
.call(chart);

return chart;
});

});

пример Вот.

0