使用 Chart.js 绘制图表，其中填充了每个 JsonRPC 获取的数据

Posted 2023-02-16

【中文标题】使用 Chart.js 绘制图表，其中填充了每个 JsonRPC 获取的数据

【英文标题】：Drawing chart with Chart.js filled with data gotten per JsonRPC

【发布时间】：2015-02-01 00:40:20

【问题描述】：

我想从 JsonRPC 调用中获取每个 javascript 到 php 服务器的结果以供进一步使用（使用 Chart.js 绘制图表）。 为此，我有一个函数应该进行调用并返回结果。 我使用这个 jQuery 插件：https://github.com/datagraph/jquery-jsonrpc

$.jsonRPC.setup(
    endPoint: '/jsonserver.php'
);

var res; // first place
function getMyStuff() 
    var res; // second place as alternative
    $.jsonRPC.request('getResultsById', 
        params: [1],
        success: function(result) 
            alert(JSON.stringify(result, null, 4)); // works well
            res = result;
        ,
        error: function(result) 
            alert("error: " + JSON.stringify(result, null, 4));
        
    );
    return res;

我的问题是我不知道如何从成功块中获取结果。如果我调用该函数，我总是未定义。

【问题讨论】：

抱歉，您的问题到底是什么？您是否只是想让函数以 json 格式返回结果？

是的，这就是我想要的。我花了一天时间试图让它工作，但我认为我是 JavaScript 的大菜鸟......所以也许指出我正确的方向就足够了。这可能很简单，但我没有找到任何可比的。

您得到未定义的结果，因为请求是异步的，因此当您返回结果时，请求尚未返回。您应该使用承诺或回调，以便在调用成功函数时，使用结果调用回调。

好的，谢谢。我已经尝试过回调，但没有成功。我会再尝试。也许我不够清楚。我想用 Chart.js 创建一个图表，其中填充了页面加载时每个 JsonRPC 获取的数据，但这样我以后仍然可以添加数据。稍后我回家时会更新我的问题，以便更清楚地了解上下文。

【参考方案1】：

请求是异步处理的，因此您需要提供回调，就像您已经在“成功”和“错误”块中所做的那样。可能最简单的方法就是提供另一个回调以调用结果，如下所示：

$.jsonRPC.setup(
    endPoint: '/jsonserver.php'
);

getMyStuff(function (result) 
    console.log("here's the result", result);
);

function getMyStuff(callback) 
    $.jsonRPC.request('getResultsById', 
        params: [1],
        success: callback,
        error: function(result) 
            console.error("error:", result);
        
    );

【讨论】：

谢谢你，成功了。我以前也有类似的东西，但我不知道如何处理它。

【参考方案2】：

谢谢大家的提示。 对于遇到同样问题的每个人——我的工作代码示例：

$.jsonRPC.setup(
    endPoint: '/jsonserver.php'
);

drawMyChart(function (result) 
    var ctx = document.getElementById("canvas").getContext("2d");
    var lineChartData = 
        labels: makeSuitableArrayLabel(result),
        datasets : [
            
                fillColor : "#F06292",
                data: makeSuitableArrayFirst(result)
            ,
            
                fillColor : "#1565C0",
                data: makeSuitableArraySecond(result)
            
        ]
    ;

    window.myLine = new Chart(ctx).Line(lineChartData, 
        // options
    );
);

function drawMyChart(callback) 
    $.jsonRPC.request('getResultsById', 
        params: [1],
        success: callback,
        error: function(result) 
            console.error("error:", result);
        
    );


// add
$("#add").click(function() 
    myLine.addData([1, 2], "label");
);