如何显示弹出警报消息而不阻止要渲染的页面以及如何在每30秒刷新一次图表

Question

如果值小于3，我想显示弹出窗口。 我使用了警报功能，但是当触发此警报事件时，页面不会呈现。 如何在不阻止要显示的页面的情况下显示弹出窗口，以及如何每30秒刷新一次图表。

<script>
        FusionCharts.ready(function () {
            LoadChart();
        });
        function LoadChart() {
            $.ajax({
                url: '@Url.Action("get", "air")',//remote api address

                type: 'GET',
                crossDomain: true,
                success: function (data) {
                    if (data.success) {

                        var dust= data.sensorsdata.cl;
                        if (dust > 3)
                            alert("dust is high");
                        $("#lblDate").text(data.sensorsdata.CurrentTime);
                        $("#currenttime").show();

                     var dustchart= new FusionCharts({
                            type: 'angulargauge',
                            renderAt: 'ph-container',
                            width: '450',
                            height: '300',
                            dataFormat: 'json',
                            dataSource: {
                                "chart": {
                                    "caption": "Chlorine ",
                                    "lowerLimit": "0",
                                    "upperLimit": "14",
                                    "showValue": "1",
                                    "valueBelowPivot": "1",
                                    "theme": "fint"
                                },
                                "colorRange": {
                                    "color": [{
                                        "minValue": "0",
                                        "maxValue": "5",
                                        "code": "#6baa01"
                                    }, {
                                        "minValue": "5",
                                        "maxValue": "10",
                                        "code": "#f8bd19"
                                    }, {
                                        "minValue": "10",
                                        "maxValue": "14",
                                        "code": "#e44a00"
                                    }]
                                },
                                "dials": {
                                    "dial": [{
                                        "value": dust
                                    }]
                                }
                            }
                        });
                        dustchart.render();


                    }
                }
            });
        }
</script>


 <td><div id="dust-container" style="float:left;"></div></td>

Answer 1

Javascript模式将始终阻止页面。 您需要实现自己的弹出代码或使用库作为示例bootstrap模式

http://getbootstrap.com/javascript/

如果你只做简单的通知，你可以想到的另一种方法是使用名为toastr（或growl）的东西 - 这里也有libs。

要更新fussioncharts，请查看此示例

http://www.fusioncharts.com/dev/using-with-javascript-libraries/jquery/updating-chart-properties-using-jquery.html#changing-the-data-for-an-existing-chart