Question

如何使用返回JSON编码数据的Ajax请求加载带有远程数据的图表？

编码片段：

var chart = c3.generate({
    bindto:"#chartdivObservation",
    data: {
        columns: [
            ['loading', 30, 20, 50, 40, 60, 50],
        ]
    }
});

$(document).on("change","#getObservation",function(){
    var team_id=$(this).val();
    var user_id=<?=$userId?>;

    $.ajax({
        url:"ajax/user/getDeltaStats.php",
        type:"POST",
        data:{
            get:"getObservationReport",
            teamId:team_id,
            userId:user_id
        },
        success:function(response){
            var data = $.trim(response)
            setTimeout(function(){
                chart.unload('loading');
                console.log("loading chart...")
                console.log(data)
                chart.load({columns: data})
            }, 4500)

            console.log(chart)

        }
    });
});

第一列“加载”是虚拟数据，以便渲染图表。稍后，使用超时我将其加载新数据（参考http://c3js.org/samples/data_load.html）。但是，图表不会使用新数据进行渲染。

ajax请求生成的响应是：

[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation & Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]]

Answer 1

这是一个适用于我的应用程序的示例。也许这有帮助。

$(document).on("click", "#btnPDquant", function(event) {
    $.ajax({ 
    url: "PDQuantCalc",
    type: "post",
    data: $('#formPDquant').serialize(), 
    success: function(response){
        var newdat = JSON.parse(response);
        $("#divPDquant").text(newdat.PDquant[1]);
        chart.x(newdat.year);
        chart.load({
            columns: [ newdat.PDquant ]
        });
    },
    error: function (response) {
        $("#divPDquant").text("error");}
    });
    event.preventDefault(); // Important! Prevents submitting the form.
});

使用远程数据加载c3图表

1 个答案: