时间戳

首页 > 解决方案 > 是否有一种有效的方法可以将 JavaScript 数组从 .js 文件传递​​到 .html 文件以使用 Plotly 进行绘图？

javascript - 是否有一种有效的方法可以将 JavaScript 数组从 .js 文件传递​​到 .html 文件以使用 Plotly 进行绘图？

问题描述

我在将迭代 if 语句构建的数组从 .js 文件传递​​到 .html 文件时遇到问题。

我正在使用 Plotly 提供的样板设置，它可以自行工作，但是当我尝试将我的值传递给要绘制的变量“x”和“y”时，我似乎无法建立连接。

在提供的代码中，我试图这样做：x:[time_array], y:[num_velocity_array]

而不是：（这些是有效的样板“x”和“y”值x：[0,1,2,3,4,5,6] y：[2,4,3,2,11,12， 14]

<!--HTML code-->
<div class="container-fluid d-flex justify-content-center" id="motion">

    <div class="align-self-center">
    <p><h3><b> EQUATIONS OF MOTION</b> </h3></p>

        <div id="finvel" style="width:600px;height:250px;">

            <script>
                FINVEL = document.getElementById('finvel');
                Plotly.plot( FINVEL, [{
                    x: [0,1,2,3,4,5,6],
                    y: [2,4,3,2,11,12,14]}], {
                    margin: { t: 0 } } );
            </script>

            <div>
                <h4> Final Velocity </h4>

                <form onsubmit="calculateFinalVelocity()">

                    <p>
                        <label for="initialvelocity_final1">Initial Velocity in m/s</label>
                        <input id="initialvelocity_final1" type="number" />
                    </p>

                    <p>
                        <label for="acceleration_final1">Acceleration in m/s<sup>2</sup></label>
                        <input id="acceleration_final1" type="number" />
                    </p>

                    <p>
                        <label for="time_final1">Time in Seconds</label>
                        <input id="time_final1" type="number" />
                    </p>

                    <button type="button" onclick="calculateFinalVelocity()">Calculate Final Velocity</button>
                </form>

                <p id="answer_final1"></p>
            </div>

        </div>
      </div>

</div>


<!--JavaScript code-->

function calculateFinalVelocity()
    {
        var initialvelocity = document.getElementById("initialvelocity_final1").value;
        var acceleration = document.getElementById("acceleration_final1").value;
        var time = document.getElementById("time_final1").value;

        var finalvelocity = Number(initialvelocity) + (Number(acceleration) * Number(Math.abs(time)));

        document.getElementById("answer_final1").innerHTML = 'The Final Velocity is found to be: ' + finalvelocity + ' m/s';

        document.getElementById("time_final1").innerHTML = time;
        document.getElementById("initialvelocity_final1").innerHTML = initialvelocity;


        var initial_time = 0;

        var num_velocity_array = [];


        var time_array = [];

        if (initial_time <= time)
        {
            num_velocity = Number(initialvelocity) + (Number(acceleration) * Number(initial_time));
            time_array.push(initial_time);
            num_velocity_array.push(num_velocity);

            time_initial = initial_time + 0.25;


        }
    }

我正在尝试将附加到 time_array 的值绘制为我的 x 轴值和 num_velocity_array 值作为我的 y 轴值

标签： javascripthtmlarraysplotly

解决方案

我最终让它像这样工作。

这是位于 .js 文件中的 JavaScript 代码，该代码被调用到“head”中的 .html 文件

function calculateFinalVelocity()

{

// These 3 lines pull the data from the html file and assigns it to the variables
var initialvelocity = document.getElementById("initialvelocity_final1").value;
var acceleration = document.getElementById("acceleration_final1").value;
var time = document.getElementById("time_final1").value;


// This line performs the basic algebraic calculation, for the basic physics equation
var finalvelocity = Number(initialvelocity) + (Number(acceleration) * Number(Math.abs(time)));


// These are two arrays initialized
var velocity_array = [];

var time_array = [];

for (var i = 0; i<=time; i = i + 0.25)
{

    let num_velocity = Number(initialvelocity) + (Number(acceleration) * Number(i));
    time_array.push(i);
    velocity_array.push(num_velocity);


}

var trace1 =
    {
        x: time_array,
        y: velocity_array,
        type: 'scatter'

    };
var layout = {
    title: {
        text:'Velocity vs Time',
        font: {
            family: 'Gravitas One, monospace',
            size: 18,
            color: '#ea6f09'
        },
        xref: 'paper',
        x: 0.05,
    },
    xaxis: {
        title: {
            text: 'time (s)',
            font: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#ea6f09'
            }
        },
    },
    yaxis: {
        title: {
            text: 'velocity (m/s) ',
            font: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#ea6f09'
            }
        }
    },
     plot_bgcolor: '#d0d3d8',
    // paper_bgcolor: '#d4e3fc'
};



var data = [trace1];

document.getElementById("finalVelocityOne").innerHTML = Plotly.newPlot("finalVelocityOne", data, layout);
Plotly.newPlot("finalVelocityOne", data, layout);

// alerts used to test if arrays were being updated
// alert(time_array)
// alert(velocity_array)

document.getElementById("answer_final1").innerHTML = 'The Final Velocity is found to be: ' + finalvelocity + ' m/s';

}

这是.html文件代码

<div id="finalVelocityOne" style="width:500px;height:500px;"></div>

推荐阅读