javascript - 自定义 JavaScript 与 Flot 的交互

Question

我在自学 JavaScript 时构建的网站遇到了各种问题。阅读本文时请记住，我是一名老 Fortraner。我将尝试使每个问题都非常清楚，以防其他人也希望从中学习。所有愚蠢的错误都是我自己犯的。

问题 #1:<input type="number" ...>内容未传递给 JavaScript

HTML:

<div class="form">
  <form id="pendulum">
    <table class="form">
      <tr>
        <td>
          <label><span class="rollover">Initial angle<span>0.0 &le; <i>&theta;</i> &le; 1.6</span></span>, $\theta_0$, of the mass:</label>
          <input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1"> rad
        </td>
      </tr>
      <tr>
        <td>
          <label><span class="rollover">Ratio<span>1.0 &le; <i>g</i>/<i>L</i> &le; 10.0</span></span> of $\frac{g}{L}$:</label>
          <input type="number" name="read_ratio" id="read_ratio" value="9.0" min="1.0" max="10.0" step="0.1">
        </td>
      </tr>
      <tr>
        <td>
          <label><span class="rollover">Initial angular velocity<span>0.0 &le; <i>&omega;</i> &le; 6.0</span></span>, $\omega_0$, of the mass:</label>
          <input type="number" name="omega_read" id="omega_read" value="0.0" min="0.0" max="6.0" step="0.1"> rad/sec
        </td>
      </tr>
      <tr>
        <td>
          <label><span class="rollover">Time-step<span>0.001 &le; <i>dt</i> &le; 0.1</span></span>, $dt$, of the system:</label>
          <input type="number" name="dt_read" id="dt_read" value="0.01" min="0.001" max="0.1" step="0.001"> sec
        </td>
      </tr>
      <tr>
        <td>
          Period of the pendulum: <span id="output"></span> sec
        </td>
      </tr>
    </table>
    <input type="button" value="Evaluate" onclick="amp()">
    <a class="js" href="amp.js">Download the JavaScript</a><br>
  </form>
</div>

JavaScript:

function amp() {
  "use strict";
  var i_max,
    m,
    g,
    pendulum,
    f_osc,
    theta,
    omega,
    a,
    e,
    de,
    time,
    pi,
    theta0,
    read_ratio,
    const0,
    T,
    result,
    message,
    omega_read,
    dt_read,
    dt,
    i;
  i_max = 500;
  m = 1.0;
  g = 9.8;
  f_osc = 0.0;
  pendulum = document.forms.pendulum;
  theta = [];
  omega = [];
  a = [];
  e = [];
  de = [];
  time = [];
  pi = Math.acos(-1.0);
  theta0 = pendulum.elements.theta0;
  theta[0] = theta0;
  read_ratio = pendulum.elements.read_ratio;
  const0 = read_ratio;
  T = 2 * pi * Math.sqrt(Math.pow(const0, -1));
  result = T.toFixed(2);
  document.getElementById('output').innerHTML = result;
  omega_read = pendulum.elements.omega_read;
  omega[0] = omega_read;
  dt_read = pendulum.elements.dt_read;
  dt = dt_read;
  e[0] = 0.5 * (Math.pow(omega[0], 2) + const0 * Math.pow(theta[0], 2));
  time[0] = 0.0;
  i = 0;
  do {
    f_osc = -const0 * Math.sin(theta[i]);
    a[i] = f_osc / m;
    e[i] = 0.5 * (Math.pow(omega[i], 2) + const0 * Math.pow(theta[i], 2));
    de[i] = e[i] - e[0];
    theta[i + 1] = theta[i] + omega[i] * dt + 0.5 * a[i] * dt * dt;
    f_osc = -const0 * Math.sin(theta[i + 1]);
    a[i + 1] = f_osc / m;
    omega[i + 1] = omega[i] + 0.5 * (a[i + 1] + a[i]) * dt;
    e[i] = 0.5 * (Math.pow(omega[i + 1], 2) + const0 * Math.pow(theta[i + 1], 2));
    de[i] = e[i] - e[0];
    time[i + 1] = time[i] + dt;
    i = i + 1;
  } while (i < i_max);
  return time;
  return theta;
  return omega;
  return e;
}

在此之前，我使用线性函数做了一个简单的测试。 (出于好奇，当前的脚本模拟了一个简单的钟摆。)我的简单测试似乎有效；这不是。我不知道为什么不。我想返回 time 的数组, theta , omega , 和 e .但是当我做所有这些时，JSLint 尖叫着血腥谋杀return声明。

问题 #2:Flot 不知道传递的数组？

我希望执行的下一个任务是获取 time 的有趣数据, theta , omega , 和 e并使用 Flot 绘制它。但是，我不确定此信息是否已正确传递给 Flot 脚本。例如，Chrome 的错误控制台似乎没有提示，但作为 JavaScript 的新手，我不确定进行这种“健全性检查”的最佳实践。

JavaScript:

function doPlot(position,time,theta,omega,e) {
  $.plot("#placeholder", [
    {
      data: [time, theta],
      label: "Angle (rad)",
      yaxis: 1,
      color: "red"
    },
    {
      data: [time, omega],
      label: "Angular Velocity (rad/sec)",
      yaxis: 2,
      color: "green"
    },
    {
      data: [time, e],
      label: "Energy (J)",
      yaxis: 3,
      color: "blue"
    }
  ],
    {
      yaxes: [ { alignTicksWithAxis: position == "left" ? 1 : null } ],
      legend: { position: "ne" }
    }
  );
};

次要问题是绘制 x 和 y 数据数组的正确语法。 Flot 文档在这一点上似乎并不太清楚。上面的代码显示的是我目前最好的猜测，但从根本不起作用来看，这显然是错误的。

问题 #3:Flot 中的彩色轴？

如第 2 期所示，我有一个包含多个 y 轴的绘图。为了可读性，我想用用于绘制数据的相应颜色为轴 2 和 3 着色。我在这个问题上发现的最多的是 here .不过，我不明白那里正在做什么。

我知道这很多，但为了提高效率，我已经尝试涵盖很多内容，并且希望这能帮助其他正在尝试同样事情的人。

---

更新

jrouillard，感谢你的帮助。您对return的建议陈述是最翔实的。我也像这样重新格式化了我的数据(JavaScript):

theta_plot[i + 1] = [time[i + 1], theta[i + 1]];
omega_plot[i + 1] = [time[i + 1], omega[i + 1]];
e_plot[i + 1] = [time[i + 1], e[i + 1]];

...

return [theta_plot, omega_plot, e_plot];

关于问题 #3，经过更好的搜索，我遇到了 this . (那里有多个版本的 Flot 文档；也许我看错了。)这比我最初计划的要好得多。经过一些更正(JavaScript):

function doPlot(position,theta_plot,omega_plot,e_plot) {
  $.plot("#placeholder", [
    {
      data: theta_plot,
      /*label: "Angle (rad)",*/
      yaxis: 1,
      color: "red"
    },
    {
      data: omega_plot,
      /*label: "Angular Velocity (rad/sec)",*/
      yaxis: 2,
      color: "green"
    },
    {
      data: e_plot,
      /*label: "Energy (J)",*/
      yaxis: 3,
      color: "blue"
    }
  ],
    {
      yaxes: [
        {
          position: "left",
          axisLabel: "Angle (rad)",
          axisLabelPadding: 10
        },
        {
          position: "left",
          axisLabel: "Angular Velocity (rad/sec)",
          axisLabelPadding: 10
        },
        {
          position: "left",
          axisLabel: "Energy (J)",
          axisLabelPadding: 10
        },
        { alignTicksWithAxis: position == "left" ? 1 : null }
      ]
    }
  );
  $(".yaxisLabel").css("color","red");
  $(".y2axisLabel").css("color","green");
  $(".y3axisLabel").css("color","blue");
};
doPlot("left");

我还不知道这是否会实现我想要的，因为当我加载页面时它仍然不会绘制。现在这部分返回 NaN (JavaScript):

read_ratio = pendulum.elements.read_ratio;
//read_ratio = 9.0;
const0 = read_ratio;
T = 2 * pi * Math.sqrt(Math.pow(const0, -1));
result = T.toFixed(2);
document.getElementById('output').innerHTML = result;

但是，当测试值被硬编码时，它会起作用并将预期值返回给 Period of the pendulum: <span id="output"></span> sec .

为什么脚本的其余部分不起作用仍然是个谜。错误控制台没有提供任何线索。和想法？

Answer 1

问题 1:

如果你想要多次返回，你应该将它们聚集在一个数组中。

return [time, theta, omega, e];

您还可以根据您的变量返回一个具有已定义属性的对象:

{time: time, theta: theta, omega: omega, e: e}

不过我没有测试你的代码，所以可能还有其他问题。

---

问题 2:

数据格式不正确。您将需要提取数组以创建适当的数据数组。

这是你当前的数组(带有假数据):

[[0,1,2,3,4,5,6],[0,1,2,3,4,5,6]]

你想要做的是这种格式的东西:

[[0,0], [1,1], [2,2], [3,3], [4,4], [5,5], [6,6]]

(第一个点是x轴，第二个点是y轴)

---

问题 3:

我没有读太多详细介绍 flot 代码内部的博客文章。那对初学者没有帮助。 它确实声明您可以使用轴选项中的颜色选项访问轴的颜色。

来自文档:

Customizing the axes:
    xaxis, yaxis: {
           ...
          color: null or color spec

          ...
     } 

The "color" option determines the color of the line and ticks for the axis, and defaults to the grid color with transparency. For more fine-grained control you can also set the color of the ticks separately with "tickColor". You can customize the font and color used to draw the axis tick labels with CSS or
directly via the "font" option. When "font" is null - the default - each tick label is given the 'flot-tick-label' class. For compatibility with Flot 0.7 and earlier the labels are also given the 'tickLabel' class, but this is deprecated and scheduled to be removed with the release of version 1.0.0.

所以线条的颜色选项和标签的 css

编辑:

可以在 http://www.flotcharts.org/ 上找到“正确的”文档，以及多个相关示例和官方(和维护的)插件。

您提供的 jsfiddle 很旧(flot 版本是 0.7，我们是 0.8.3)但是 axislabel 插件似乎仍然适用于最新的 flot。

这是您的样机数据示例:

http://jsfiddle.net/P2yDJ/

除了假数据我什么都没改，所以你的数据可能有问题。你确定你有合适的数组吗？ 您可以在返回数组之前对它们进行控制台记录吗？ (console.log(some variable) 会在控制台写入一些变量)

EDIT2:对于您的 NaN 问题，您的 readratio 可能实际上是一个字符串。你应该 parseInt() 它是肯定的，并且 console.log 它。