Question

我正在尝试使用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中的一个错误。

请告知

Answer 1

我使用dateAxisRenderer遇到了同样的问题，其中系列正在更新并且重绘了绘图，但我的图表中没有数据。经过大量的搔抓后，我找到了this stackoverflow answer

而不是通过

更新系列数据

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

您可以创建一个变量并将其作为参数传递给replot（）函数。要使用C5H8NNaO4中的代码段作为示例

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

我没有用你的代码测试它，但看起来我们有同样的问题，这解决了我的问题。如果这有效，我建议你也在初步投票：）

使用dateaxisrenderer的jqplot replot变为空白

1 个答案: