Question

几个星期前我发布了一个类似的问题，但没有得到任何答案，因此我现在简化了它，并且还有一个jsfiddle演示。

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

这是jsfddle链接

这是我的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示例中，初始绘图和重绘图都不起作用，但轴会更新。

如果有人能指导我正确使用带有重新绘制的dateaxisrendered的jqplot，我真的很感激

谢谢

Answer 1

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

尝试使用chrome调试工具来观察代码内部的内容以及图形如何解释给定的数据。

试试这个：Jsfiddle link

 $.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();

jqplot dateaxisrendered正确用法

1 个答案: