Question

我正在使用jqplot和dateAxisRenderer来显示x轴上带有日期标签的折线图。但是，我需要定期使用新数据更新该图。调用replot时，绘图不会改变，如下例所示。有什么建议吗？

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <script type="text/javascript" src="../jquery/ui/1.9.2/custom/js/jquery-1.8.3.js"></script>

        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/jquery.jqplot.js"></script> 
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.dateAxisRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasTextRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.AxisLabelRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.categoryAxisRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.barRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.enhancedLegendRenderer.js"></script>

        <link rel="stylesheet" type="text/css" href="../jquery/plugins/jqplot/dist/jquery.jqplot.css" />
    </head>

    <body>
        <div id="chartdiv" style="height:400px;width:800px;"></div>

        <script type="text/javascript">
            $(document).ready(function(){
                var line1 = [
                    [new $.jsDate("2013-01-28 1:10PM"), 1.0],
                    [new $.jsDate("2013-01-28 1:11PM"), 2.0],
                    [new $.jsDate("2013-01-28 1:12PM"), 4.0],
                    [new $.jsDate("2013-01-28 1:13PM"), 8.0],
                    [new $.jsDate("2013-01-28 1:14PM"), 16.0],
                    [new $.jsDate("2013-01-28 1:15PM"), 32.0]
                ];
                var plot2 = $.jqplot('chartdiv', [line1] ,{
                    series:[{lineWidth:4, showMarker:false, renderer:$.jqplot.LineRenderer}],
                    axesDefaults: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer
                    },
                    axes:{
                        xaxis:{
                            renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{
                                    formatString:'%F %X',
                                    angle: -30
                                }
                        },
                    }
                });

                alert("wait");
                line1 = [
                    [new $.jsDate("2013-01-28 1:10PM"), 32.0],
                    [new $.jsDate("2013-01-28 1:11PM"), 16.0],
                    [new $.jsDate("2013-01-28 1:12PM"), 8.0],
                    [new $.jsDate("2013-01-28 1:13PM"), 4.0],
                    [new $.jsDate("2013-01-28 1:14PM"), 2.0],
                    [new $.jsDate("2013-01-28 1:15PM"), 1.0]
                ];
                plot2.data = [line1];
                plot2.replot({resetAxes:true});
            });
        </script>
    </body>
</html>

Answer 1

我最近在jqplot上做了一些工作，发现数据处理中的不一致有点令人沮丧。

给出plot2的示例：对于条形图，您必须查看plot2.series[i].data而不是plot2.data然后replot()它（参考：http://www.jqplot.com/deploy/dist/examples/selectorSyntax.html）

e.g。为您的代码

            ...
            plot2.series[0].data = [line1];
            plot2.replot({resetAxes:true});
            ...

我试图抽象出不同图表类型的细微差别但是在那之前我通过将data存储在父对象上来破坏它，摧毁了图，然后使用{{1}重做了图。 }

在使用dateAxisRenderer的jqPlot上调用replot

1 个答案: