javascript - 提交表单时显示的数据暂时可见,然后消失

标签 javascript plotly.js

我正在尝试创建一个计算器(表单),允许用户提交一些数据,并在提交后使用plotly.js 绘制图表。现在我只是想获取一个示例图(与数据无关)以在提交空表单时呈现。然而,图表显示一瞬间,然后就消失了。看起来图表在页面刷新半秒后就消失了。我怎样才能防止这种情况发生?

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="submit" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>
function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};
</script>
</html>

最佳答案

将按钮类型从“提交”更改为“按钮”

function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="button" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>

</script>
</html>

See also this question

关于javascript - 提交表单时显示的数据暂时可见,然后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55972829/

相关文章:

Plotly.js:锁定 y 轴以避免负值

javascript - 如何使用在单击按钮上创建的用户触发放大和缩小绘图图表?

javascript - 我在 mysql(js) 中遇到语法错误(错误 : ER_PARSE_ERROR)

javascript - 使用 javascript 和/或 Jquery 通过类选择器将 html 加载到 DIV 中

d3.js - Plotly.js,在图表容器外部显示工具提示

python - Plotly Python 中的刻度格式

javascript - 如何获得带有垂直子图的分组箱图

javascript - 向 D3.js 行添加箭头

javascript - 如何将谷歌字体添加到 React Native?

javascript - 按下 enter 时隐藏的提交按钮不会在 chrome 中提交