1

我正在尝试使用 JQPlot 绘制基于实时时间的数据。

由于它是实时数据，因此我每 10 秒执行一次 ajax 调用以获取新数据并将其附加到现有数据集，然后再重新绘制。

JQPlot 图表的初始绘制很好，但随后从第一次重新绘制开始，图表永远变为空白。

这是我的 JavaScript 代码。

$.jqplot.config.enablePlugins = false;

     var Graph;
     var GraphUpdate;
     var GraphData = [];
     var interval = 10000;
     var npoints = 25;
     var maxIterations = 200;
     var niters = 0;


     var fetchInProgress = false;
     var lastSuccessCDR = 0;

     function BuildDataArray() {

        GraphData = [];
        lastSuccessCDR = 0;


        if(fetchInProgress == false)
        {
            postdata = 'successCDR='+lastSuccessCDR;
            fetchInProgress = true;
            $.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
                type:'POST',
                data:postdata,
                async:true,
                dataType:"json",
                success: function(data,status){

                        if(lastSuccessCDR == 0)
                        {
                            //GraphData = [data[0]['data']];
                            GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];
                            //GraphData = [[[1,2],[2,5],[3,7]]];
                            lastSuccessCDR = data[1]['lastCDR'];


                            Graph = $.jqplot('livechart', GraphData, {

                                stackseries : true,
                                seriesDefaults: {
                                    showMarker: false,
                                    fill: true,
                                    fillAndStroke: true
                                },
                                axes: {

                                        xaxis: {
                                          //numberTicks:2,
                                          //renderer:$.jqplot.DateAxisRenderer,
                                          //pad:0,
                                          renderer:$.jqplot.DateAxisRenderer,
                                          tickOptions: {
                                                angle: -30
                                            }

                                        },
                                        yaxis: {
                                          label: 'Call Count',
                                          //min:0,
                                          //max:30,
                                          tickInterval:2,
                                          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                                        }
                                    },
                                cursor:{
                                    zoom:true,
                                    looseZoom: true
                                }
                            });
                        }


                        fetchInProgress = false;
                    }
            });
        }
     }

     function UpdateDataArray() {

        var set = 0;

        if(fetchInProgress == false)
        {
            postdata = 'successCDR='+lastSuccessCDR;
            fetchInProgress = true;
            $.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
                type:'POST',
                data:postdata,
                async:true,
                dataType:"json",
                success: function(data,status){
                        set = [data[0]['data']];
                        lastSuccessCDR = data[1]['lastCDR'];

                        var newData = new Array();
                        newData = GraphData;

                        newData[0].shift();
                        newData[0].push(set[0][0]); 
                        GraphData = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]]; 
                        //Graph.series[0].data = newData[0];
                        Graph.series[0].data = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]];
                        //Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;


                        Graph.replot({resetAxes:true});

                        fetchInProgress = false;
                    }
            });
        }



        return set;

     }

     function StartGraphLoop() {
         BuildDataArray();

         GraphUpdate = setInterval(UpdateGraph, interval);
     }


     function UpdateGraph() {
         UpdateDataArray();

     }

     function StopGraphLoop() {

         clearInterval(GraphUpdate);
     }

我上面有两个函数，BuildDataArray() 和 updateDataArray() 用于构建初始数据集和获取后续数据元素。

如您所见，我已经用样本数据替换了从 ajax 收到的实际数据（已注释），以测试 JQPlot 的行为。不幸的是，有了这个示例数据，图表在第一次重新绘制时也会变成空白。我之前通过注释掉 xaxis 属性中的 dateaxisrenderer 选项，使用不带日期的示例数据（例如 [[1,2] 、 [2,5] 、 [3,4]] ）对此进行了测试。

所以现在我别无选择，所以要么我遗漏了一些东西，要么是渲染日期轴时 JQPlot 中的一个错误。

请指教

4

1 回答 1

1

我在使用 dateAxisRenderer 时遇到了同样的问题，其中系列正在更新并重新绘制绘图，但我的图表中没有数据。经过很多挠头后，我找到了这个stackoverflow答案

而不是通过更新系列数据

chartObj.series[i].data = // your data

您可以创建一个变量并将其作为参数传递给 replot() 函数。以C5H8NNaO4的片段为例

var series = [[1,2],[2,3]];
chartObj.replot({data:series});

我没有用你的代码测试它，但看起来我们有同样的问题，这为我解决了这个问题。如果这可行，我建议您也对最初的答案进行投票:)

于 2013-09-04T08:49:17.590 回答