Question

我有一个带左侧菜单和画布图的网页。

左侧菜单占据宽度的前155个像素。

然后将图表设置为100％的宽度（在左侧菜单占据前155个像素后剩余的100％）

问题是当我关闭左侧菜单时，图表没有刷新，现在它不占用可用窗口宽度的100％，我只能在用鼠标手动调整窗口大小时刷新它

我使用以下代码： -

<html>
<title>Test1</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
    <div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:155px; line-height:16px;" id="mySidebar">
        <div class="w3-bar w3-dark-grey">
            <span class="w3-bar-item w3-padding-16">Menu</span>
            <button onclick="w3_close_left_menu()" class="w3-bar-item w3-button w3-right w3-padding-16" title="close Sidebar">&times;</button>
        </div>
        <div class="w3-bar-block">
            <a class="w3-bar-item w3-button w3-border-bottom" href="regn.html">Test</a>
        </div>
    </div>
    <div id="main" style="margin-left:155px">
        <div class="w3-container w3-display-container">
            <span title="open Sidebar" style="display:none" id="openNav" class="w3-button w3-transparent w3-display-topleft w3-xlarge" onclick="w3_open_left_menu()">&#9776;</span>
        </div>
        <div style="padding-top:20px; padding-left:40px; width:100%;">
            DivFirst
        </div>
        <div style="padding-top:5px; padding-left:10px; padding-bottom:10px; width:98%; background-color: #11ffcc;">
            DivSecond
            <script type="text/javascript">
            window.onload = function() {;
                var chart0 = new CanvasJS.Chart("chartContainer0", {
                    legend: {
                        fontSize: 4
                    },
                    zoomEnabled: true,
                    toolTip: {
                        content: "{y} grader <br>{x}",
                        shared: false
                    },
                    axisX: {
                        gridColor: "Black",
                        gridThickness: 1,
                        interval: 1,
                        intervalType: "day",
                        interlacedColor: "#FCFCFF",
                        valueFormatString: "HH:mm - DD MMM",
                        labelFontSize: 14,
                        labelFontColor: "black"
                    },
                    theme: "theme1",
                    axisY: {
                        includeZero: false,
                        labelFontSize: 14,
                        labelFontColor: "black"
                    },
                    data: [{
                        type: "line",
                        lineThickness: 2,
                        showInLegend: true,
                        markerType: "square",
                        color: "#F08080",
                        xValueFormatString: "HH:mm - DD MMM YYYY",
                        legendText: "Inde temp",
                        dataPoints: [{
                            x: new Date(2017, 10, 3, 6, 30),
                            y: 22.15
                        }, {
                            x: new Date(2017, 10, 3, 7, 00),
                            y: 22.10
                        }, {
                            x: new Date(2017, 10, 3, 7, 30),
                            y: 21.89
                        }, ]
                    }, ],
                    legend: {
                        cursor: "pointer"
                    }
                });
                chart0.render();
            }
            </script>
            <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
            <div id="chartContainer0" style="height: 400px; width: 99%;"></div>
        </div>
    </div>
    <script>
    function w3_open_left_menu() {
        document.getElementById("main").style.marginLeft = "155px";
        document.getElementById("mySidebar").style.width = "155px";
        document.getElementById("mySidebar").style.display = "block";
        document.getElementById("openNav").style.display = 'none';
    }

    function w3_close_left_menu() {
        document.getElementById("main").style.marginLeft = "0";
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("openNav").style.display = "inline-block";

        document.getElementById("chartContainer0").reload(false);
    }
    </script>
</body>

</html>

在函数“w3_close_left_menu”中，我尝试添加以下行： -

 document.getElementById("chartContainer0").reload(false);

但这并不会强制刷新画布

Answer 1

在不对代码进行测试的情况下，我几乎可以肯定，在关闭render()中的菜单后，您需要在图表上手动触发w3_close_left_menu()。

调整DOM元素上的事件并没有广泛实现，尽管有些库可以为其添加跨浏览器支持。

这是你的经纪人：

var menuButton = document.getElementById("openNav");
menuButton.addEventListener('click', function () {
    document.getElementById("main").style.marginLeft = "155px";
    document.getElementById("mySidebar").style.width = "155px";
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("openNav").style.display = 'none';
    chart0.render();
}, true);

请注意，在您的示例中，w3.css会将转换附加到关闭和打开菜单。在这种情况下，您需要在动画元素上收听transitionend / animationend。

左侧菜单关闭时如何刷新画布图？

1 个答案: