Javascript nvD3图表未等待AJAX调用完成
Javascript nvD3 chart not waiting for AJAX call to finish
我正试图将jquery ajax调用中的一些数据加载到nvD3图表中。如果我不包括ajax调用,那么图表工作得很好,但是如果我试图在进行ajax调用后加载数据,则根本不会加载。。
<script>
angular.module('app', ['onsen'])
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label }) //Specify the data accessors.
.y(function(d) { return d.value })
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
;
d3.select('#chart svg')
.datum(exampleData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Each bar represents a single discrete quantity.
function exampleData() {
$.ajax({
type: "GET",
url: "https://demo8162910.mockable.io/json",
dataType: 'jsonp',
jsonp: true,
jsonpCallback: "myJsonMethod",
error: function(){
console.log( 'Unable to load feed, Incorrect path or invalid feed' );
},
success: function(data){
console.log( 'feed done' );
return [
{
key: "Cumulative Return",
values: [
{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
} ,
{
"label" : "E Label" ,
"value" : 0.19434030906893
} ,
{
"label" : "F Label" ,
"value" : -98.079782601442
} ,
{
"label" : "G Label" ,
"value" : -13.925743130903
} ,
{
"label" : "H Label" ,
"value" : -5.1387322875705
}
]
}
]
}});
}
</script>
我认为您需要放置
d3.select('#chart svg')
.datum(exampleData())
.call(chart);
在success
函数中,用数据本身替换exampleData()
。
相关文章:
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Javascript/jQuery中的并行Ajax调用
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- node.js请求数据事件未在CORS ajax调用中触发
- 如何从ajax调用返回.wrap()元素
- Ajax调用在Firefox中不会自动响应
- AJAX调用中的非法调用
- 使用AJAX调用将GeoJSON数据拉入传单
- 在MVC 4中,对Controller的Ajax调用为空
- Jquery:对返回JSON数据的php脚本的Ajax调用
- 在ajax调用中阻止来自JS对象的函数
- 如何在MVC5中ajax调用的部分视图中引用外部javascript
- 页面加载后的Ajax调用
- 如何使用Ajax调用特定的控制器和操作来重定向用户
- curl和fileget_contents在ajax调用后不起作用
- 在任何AJAX调用之前触发一个javascript函数
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- Ajax调用ERror Cross Origin REquest:在rails中自动完成大学列表
- ASP.NET MVC 3-在ajax调用后,重定向到新页面或生成页面刷新
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作