如何摆脱页面加载后出现的div

时间:2016-02-17 00:34:10

标签: javascript html

我正在创建一个从Mango Automation获取数据并将其显示在图表中的网页。出于某种原因,在加载页面后会自动显示div。 div是不需要的,我不希望观众完全看到它,所以我应该如何删除它呢?

以下是情况的图像

enter image description here

以下是我的页面的源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>NitraattiTyppi</title>
    <style>
    #data{
    width:60%;
    margin: 0 auto;
    }

    #Graafi {
    height: 600px;
    background-color: #FFFFFF;
    border: 2px outset black;
    padding: 50px;
    background-color: rgba(255,255,255, 0.8);
    }
    </style>
    <!-- Add the Mango Favicon -->
    <link rel="icon" href="/images/favicon.ico">

    <!-- Page Style -->



    <!-- Base Library -->
    <script type="text/javascript" src="/resources/loaderConfig.js"></script>
    <script type="text/javascript" src="/resources/require.js"></script>
    <script type="text/javascript" src="/resources/main.js"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/plugins/export/export.js"></script>

    <script type="text/javascript">

    require(['jquery', 'mango/api', 'mango/TimePresetPicker', 'mango/SerialChart',
             'mango/PointValueDataProvider', 'mango/ProviderOptionsManager', 'jquery.notify'],

    function($, MangoAPI, TimePresetPicker, SerialChart, PointValueDataProvider,
            ProviderOptionsManager, point, exportXLSX) {
            //Setting up the chart
        chart = new SerialChart({
            divId: 'Graafi',
            amChart: {
                theme: "light",
                chartScrollbar: {
                    enabled: true,
                    graph: 'DP_211607',
                    offset: 30,
                    oppositeAxis: false,
                    scrollbarHeight: 90
                },
                legend: {
                    align: 'center',
                },
                categoryAxis: {
                    minPeriod: 'ss'
                }
            }
        });

        //Creating the display on the page
        chart.createDisplay();

                    // create a point value data provider
        var dataProvider = new PointValueDataProvider(null, {
            // convert point values to their specified unit
            apiOptions: { converted: true }
        });

                    // setup the time picker with its inputs
        var timePicker = new TimePresetPicker({
            presetPicker: $('#presetPicker'),
            defaultPeriod: 'WEEK_TO_DATE'
        },
        TimePresetPicker.presetValues = [
            {
                id: "DAY_TO_DATE",
                value: 70,
                name: "Day"
            },
            {
                id: "WEEK_TO_DATE",
                value: 75,
                name: "Week"
            },
            {
                id: "MONTH_TO_DATE",
                value: 80,
                name: "Month"
            },
            {
                id: "YEAR_TO_DATE",
                value: 85,
                name: "Year"
            },
            {
                id: "INCEPTION_TO_NOW",
                value: 105,
                name: "Whole history"
            }
        ]);
        var providerManager = new ProviderOptionsManager({
            errorFunction: MangoAPI.logError,
            timePicker: timePicker
        });

        // link the chart to the data provider
        dataProvider.addListener(chart);

        // link the provider to the provider manager
        providerManager.addProvider(dataProvider);

        $('#presetPicker').on('change', function() {
            // update the data provider
            providerManager.refreshProviders();
        });
        function loadPoints() { 
            MangoAPI.defaultApi.queryPoints('xid=DP_211607').then(function(results){
                    dataProvider.addDataPoint(results.items[0]);
           }).fail(MangoAPI.logError);
        };
        loadPoints();
        this.onload = function(){
            providerManager.refreshProviders();
        };
    });

</script>
</head>
<body>
    <div id="data">
        <header></header>
        <div id="Graafi"></div>
        <div class="input">
            <select id="presetPicker" class="form-control"></select>
        </div>
        <input type="button" value="Download" onclick="exportXLSX();" />
        <footer></footer>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

使用CSS,只需隐藏它!

#confirmDialog { display: none; }