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>
Любая помощь высоко ценится
Решение
Как сказано в комментариях @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;
});
});
пример Вот.
Другие решения
Других решений пока нет …