0

几周前我发布了一个类似的问题，但没有得到任何答案，因此我现在已经对其进行了简化，并且还有一个 jsfiddle 演示。

基本上我正在尝试将 jqplot 与 dateaxis 一起使用，并尝试通过更改输入数据来重新绘制图表。

这是jsfddle链接

http://jsfiddle.net/shympurk/JNTsv/2/

这是我的 javascript

 $.jqplot.config.enablePlugins = true;

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



         function BuildDataArray() {

            GraphData = [];
        ;
                                GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];


                                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
                                    }
                                });

         }

         function UpdateDataArray() {
                            var newData = new Array();
                            newData = GraphData;

                            newData[0].shift();


                            Graph.series[0].data = newData[0];
                            //Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;


                            Graph.replot({resetAxes:true});


         }

         function StartGraphLoop() {
             BuildDataArray();

             GraphUpdate = setInterval(UpdateGraph, interval);
         }


         function UpdateGraph() {
             UpdateDataArray();

         }

         function StopGraphLoop() {

             clearInterval(GraphUpdate);
         }


StartGraphLoop();

我有一个 StartGraphLoop( ) 函数，它构建一个初始系列数据数组并绘制图形。它还激活了一个 setInterval 来更新系列数据并稍后重新绘制图表。

在我的情况下，重新绘制不起作用，并且 jqplot 在调用第一次重新绘制后变为空白。在 jsfiddle 示例中，初始绘图和重新绘图均不起作用，但轴已更新。

如果有人可以指导我正确使用 jqplot 和 dateaxisrendered with replot，我将不胜感激

谢谢

4

1 回答 1

0

它没有得到更新，因为您试图将更新后的值提供给其中包含日期/时间值的图表。它不理解这些值，因为图形通过数字知道 x 轴上的每个刻度。就像第一个刻度总是 1 然后 2 等等。

尝试使用 chrome 调试工具来观察代码内部发生的事情以及图形如何解释提供给它的数据。

试试这个：Jsfiddle 链接

 $.jqplot.config.enablePlugins = true;

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

 function BuildDataArray() {

    GraphData = []; ;
    GraphData = [[["2013-07-17 21:11:20", 2], ["2013-07-17 21:12:20", 5], ["2013-07-17 21:14:20", 7]]];

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

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

                xaxis : {
                    renderer : $.jqplot.CategoryAxisRenderer,
                    tickOptions : {
                        angle : -30
                    }

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

 }

 function UpdateDataArray() {
    var newData = new Array();
    newData = Graph.series[0].data;

     newData.shift();
     newData.push( [1,Math.floor((Math.random()*10)+1)]);
    Graph.series[0].data = newData;


    Graph.replot({
        resetAxes : true
    });

 }

 function StartGraphLoop() {
    BuildDataArray();

    GraphUpdate = setInterval(UpdateGraph, interval);
 }

 function UpdateGraph() {
    UpdateDataArray();

 }

 function StopGraphLoop() {

    clearInterval(GraphUpdate);
 }

 StartGraphLoop();
于 2013-08-05T04:22:48.663 回答