使用远程数据加载 c3 图表答案

【问题标题】：load c3 chart with remote data使用远程数据加载 c3 图表
【发布时间】：2015-10-19 09:27:58
【问题描述】：

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

编码sn-p：

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]]

【问题讨论】：

标签： ajax c3.js

【解决方案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.
});

【讨论】：