Jquery.flot - Android 4.2.2 WebKit 534.30在页面上创建第二个图形

时间:2015-03-31 19:42:54

标签: android webkit flot

我在图形下方有一个带有过滤按钮的jquery flot,使用户能够以每周方式或每日方式显示值等。 问题发生在用户点击过滤按钮时,突然创建了第一个图表上方的另一个flot图表并且它一直停留在那里,直到我离开页面并返回页面。

我有以下代码,一旦用户访问该页面就会显示图表; 并且过滤按钮调用具有相同代码但具有不同刻度尺寸的函数(例如,以周为单位)。

PS:我正在使用Phonegap为正常的Android webview准备应用程序。使用的引擎取决于Android版本。

WebKit版本; Ref

  • Android 4.2.2 534.30(创建了另一个flot图表)
  • Android 4.4.x 537.36(按预期工作)

代码:

var plot = $.plot("#placeholder", [{
                data: dAlle
            }], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    markings: [{
                        yaxis: {
                            from: 0,
                            to: 12
                        },
                        color: "#F2CDEA"
                    }, {
                        yaxis: {
                            from: rangeMin,
                            to: rangeMax
                        },
                        color: "#D7EEE1"
                    }]
                },
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "month"],
                    /*min: theVeryFirstPoint,
                    max: theVeryLastPoint*/
                },
                yaxis: {
                    min: 0,
                    max: 12
                }
            });

奇怪的是,同样的逻辑适用于Android的LG G2 API级别19(4.4.2),但是当我将应用程序安装到具有API级别16(4.2.2)的Samsung S2时,会出现此问题。有没有办法防止它发生?

CSS + JS导入如下;

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css" />

<script type="text/javascript" src="cordova.js"></script>

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.threshold.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.areamarkings.js"></script>

调用的过滤函数;

   $("#a-uke").click(function() {
                  console.log("a dag filtering will be applied...");


            var newDataSer = window.localStorage.getItem("storedData");
            if (newDataSer != null) {
                newDataSer = JSON.parse(newDataSer);

                // Just convert into a new array object for the FIRST time
                //if (dagButtonClicked == false) {
                $.each(newDataSer, function(index, datapoint) {
                    datapoint[2] = datapoint[0];
                    datapoint[0] = (new Date(datapoint[0])).getHours();
                    console.log("hours created : " + datapoint[0]);
                    dagButtonClicked = true;
                });
                //}
                if (newDataSer != null && newDataSer.length > 0) {
                    newDataSer.sort(function(x, y) {
                        console.log("sorting..");
                        return x[0] - y[0];
                    })
                }
            } else
                newDataSer = [];



            $.plot("#placeholder", [newDataSer], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    areaMarkings: [{
                        points: [
                            [7, 12],
                            [24, 12],
                            [24, 0],
                            [7, 0]
                        ],
                        lineWidth: 0,
                        fillColor: "#F2CDEA"
                    }, {
                        points: [
                            [7, rangeBr1],
                            [7, rangeBr2],
                            [10, rangeBr2],
                            [10, rangeBr1]
                        ], // Green for breakfast
                        lineWidth: 0,
                        fillColor: "#D7EEE1"
                    }, {
                        points: [
                            [7, rangeBr2],
                            [7, rangeBr3],
                            [10, rangeBr3],
                            [10, rangeBr2]
                        ], // Gradient1 Top for breakfast
                        lineWidth: 0,
                        fillColor: "#DFE4E3"
                    }, {
                        points: [
                            [7, rangeBr3],
                            [7, rangeBr4],
                            [10, rangeBr4],
                            [10, rangeBr3]
                        ], // Gradient2 Top for breakfast
                        lineWidth: 0,
                        fillColor: "#E7DAE6"
                    }, {
                        points: [
                            [7, rangeBrBot2],
                            [7, rangeBrBot3],
                            [10, rangeBrBot3],
                            [10, rangeBrBot2]
                        ], // Gradient1 Bottom for breakfast
                        lineWidth: 0,
                        fillColor: "#DFE4E3"
                    }, {
                        points: [
                            [7, rangeBrBot1],

                            [7, rangeBrBot2],
                            [10, rangeBrBot2],
                            [10, rangeBrBot1]
                        ], // Gradient2 Bottom for breakfast
                        lineWidth: 0,
                        fillColor: "#E7DAE6"
                    }, {
                        points: [
                            [10, rangeMin],
                            [10, rangeMaxGrad],
                            [24, rangeMaxGrad],
                            [24, rangeMin]
                        ], // Green for the rest
                        lineWidth: 0,
                        fillColor: "#D7EEE1"
                    }, {
                        points: [
                            [10, rangeMaxGrad],
                            [10, rangeMaxGrad2],
                            [24, rangeMaxGrad2],
                            [24, rangeMaxGrad]
                        ], // Gradient1 top for the rest
                        lineWidth: 0,
                        fillColor: "#DFE4E3"
                    }, {
                        points: [
                            [10, rangeMaxGrad2],
                            [10, rangeMaxGrad3],
                            [24, rangeMaxGrad3],
                            [24, rangeMaxGrad2]
                        ], // Gradient2 top for the rest
                        lineWidth: 0,
                        fillColor: "#E7DAE6"
                    }, {
                        points: [
                            [10, rangeMinGrad2],
                            [10, rangeMin],
                            [24, rangeMin],
                            [24, rangeMinGrad2]
                        ], // Gradient1 bottom for the rest
                        lineWidth: 0,
                        fillColor: "#DFE4E3"
                    }, {
                        points: [
                            [10, rangeMinGrad3],
                            [10, rangeMinGrad2],
                            [24, rangeMinGrad2],
                            [24, rangeMinGrad3]
                        ], // Gradient2 bottom for the rest
                        lineWidth: 0,
                        fillColor: "#E7DAE6"
                    }]
                },
                xaxis: {
                    tickFormatter: getAmPmHour,
                    min: 7,
                    max: 24
                },
                yaxis: {
                    min: 0,
                    max: 12
                }
            });

        });

1 个答案:

答案 0 :(得分:0)

不确定导致该错误的原因,但您可以尝试两种可能的解决方案:

1)您可以在创建新图之前清除旧图:

$('#placeholder').empty();
$.plot("#placeholder", [newDataSer], { /* your new options */ });

2)您可以使用现有的绘图而不是创建新的绘图(这是推荐的方式):

plot.setData([newDataSer]);
plot.getOptions().grid.areaMarkings = [ /* your new markings / options */ ];
plot.getOptions().xaxis = { /* your new options */ };
plot.setupGrid();
plot.draw();