Существует ли эффективный способ передачи массива JavaScript из файла .js в файл .html для печати с использованием Plotly?

Question

У меня проблемы с передачей массива, созданного с помощью итеративного оператора 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

Answer 1

Я закончил тем, что заставил это работать так.

Вот код JavaScript, который находится в файле .js, который вызывается в файл .html в 'head'

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>