如何实现Plotly图表无需点击按钮即可自动加载到网页中

问题根因 #

• $(document).ready() 仅保证DOM树加载完成，若你的Plotly库是异步引入、或者图表容器是后插入的动态DOM，此时要么Plotly对象未初始化完成，要么容器还不存在，导致if判断不通过，代码直接未执行，所以无报错也无图表。
• 原有判断逻辑容错性差：直接判断容器html() === ""，如果容器内有默认的换行、空格字符，判断就会失败，代码不会执行。

解决方案1：仅需自动渲染，不需要保留按钮切换功能 #

// 用window.load代替document.ready，保证所有外部资源（含Plotly库）加载完成后再执行
$(window).on('load', function() {
    // 先判断容器是否存在，再用trim()去除首尾空格后判断内容是否为空
    const $graphContainer = $("#lesson11StudentScatterGraph");
    if($graphContainer.length && $graphContainer.html().trim() === "") {
        let trace1 = {
            x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
            y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
            mode: 'markers',
            type: 'scatter'
        };
        let layout = {
            autosize: true,
            margin: {
                l: 50,
                r: 10,
                b: 40,
                t: 40,
                pad: 5
            },
            title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
            xaxis: {
                title: 'Number of Cups of Coffee',
                showgrid: true,
                zeroline: true,
                showline: false,
                range: [0, 10]
            },
            yaxis: {
                title: 'Hours of Sleep',
                showgrid: true,
                zeroline: true,
                showline: false,
                range: [0, 10]
            },
            plot_bgcolor:"#f8f1f1",
            paper_bgcolor:"#f8f1f1"
        };
        let data = [trace1];
        let config = {
            showSendToCloud: true,
            displayModeBar: false,
            scrollZoom: false,
            responsive: true
        }
        Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
    }
});

解决方案2：既要自动渲染，又要保留原有的按钮显示/隐藏切换功能 #

$(window).on('load', function() {
    const $graphContainer = $("#lesson11StudentScatterGraph");
    const $toggleBtn = $("#lesson11StudentScatterButton");
    // 自动渲染逻辑
    if($graphContainer.length && $graphContainer.html().trim() === "") {
        let trace1 = {
            x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
            y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
            mode: 'markers',
            type: 'scatter'
        };
        let layout = {
            autosize: true,
            margin: {
                l: 50,
                r: 10,
                b: 40,
                t: 40,
                pad: 5
            },
            title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
            xaxis: {
                title: 'Number of Cups of Coffee',
                showgrid: true,
                zeroline: true,
                showline: false,
                range: [0, 10]
            },
            yaxis: {
                title: 'Hours of Sleep',
                showgrid: true,
                zeroline: true,
                showline: false,
                range: [0, 10]
            },
            plot_bgcolor:"#f8f1f1",
            paper_bgcolor:"#f8f1f1"
        };
        let data = [trace1];
        let config = {
            showSendToCloud: true,
            displayModeBar: false,
            scrollZoom: false,
            responsive: true
        }
        Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
        // 同步修改按钮状态，和原有点击逻辑对齐
        if($toggleBtn.length) {
            $toggleBtn.html("Hide Graph");
            $toggleBtn.removeClass("createQuestionsButton").addClass("checkAnswerButton");
        }
    }

    // 保留原有按钮点击切换逻辑
    if($toggleBtn.length){
        $toggleBtn.click(function (){
            if($graphContainer.html().trim() === "") {
                let trace1 = {
                    x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
                    y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
                    mode: 'markers',
                    type: 'scatter'
                };
                let layout = {
                    autosize: true,
                    margin: {
                        l: 50,
                        r: 10,
                        b: 40,
                        t: 40,
                        pad: 5
                    },
                    title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
                    xaxis: {
                        title: 'Number of Cups of Coffee',
                        showgrid: true,
                        zeroline: true,
                        showline: false,
                        range: [0, 10]
                    },
                    yaxis: {
                        title: 'Hours of Sleep',
                        showgrid: true,
                        zeroline: true,
                        showline: false,
                        range: [0, 10]
                    },
                    plot_bgcolor:"#f8f1f1",
                    paper_bgcolor:"#f8f1f1"
                };
                let data = [trace1];
                let config = {
                    showSendToCloud: true,
                    displayModeBar: false,
                    scrollZoom: false,
                    responsive: true
                }
                Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
                $toggleBtn.html("Hide Graph");
                $toggleBtn.removeClass("createQuestionsButton").addClass("checkAnswerButton"); 
            } else {
                $graphContainer.html("");
                $toggleBtn.html("Scatter Plot");
                $toggleBtn.removeClass("checkAnswerButton").addClass("createQuestionsButton");
            };
        });
    }
});

如果调整后还是不生效，可以在代码对应位置加console.log()断点，确认if条件是否触发、Plotly对象是否存在，进一步定位问题。

内容的提问来源于stack exchange，提问作者Neo Anderson