cari

Rumah >hujung hadapan web >tutorial js >详细解读plotly.js 绘图库使用教程（详细教程）

详细解读plotly.js 绘图库使用教程（详细教程）

亚连
亚连asal
2018-06-04 17:48:006180semak imbas

本篇文章主要介绍了详解plotly.js 绘图库入门使用教程，现在分享给大家，也给大家做个参考。

本文介绍了plotly.js 绘图库入门使用教程，分享给大家，具体如下：

Plotly

缘起

这两天想在前端展现数学函数图像，猜测应该有成熟的 js 库。

于是，简单的进行了尝试。

最后决定使用plotly.js，其他的比如function-plot 看起来也不错，以后有时间再看。

Plotly

plotly.js is the open source JavaScript graphing library that powers Plotly.

Plotly 可以称之为迄今最优秀的绘图库，没有之一。

简单案例

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>plot 绘制图像</title>
</head>
<body>
<p id="tester" style="width:600px;height:250px;"></p>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
  TESTER = document.getElementById(&#39;tester&#39;);
  Plotly.plot(TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16]
  }], {
    margin: {t: 0}
  });
</script>
</html>

效果

点图

绘制数学图像

数学图像绘图的原理。比如说 y = 2*x+1，实际上就是一系列 (x,y) 的点连接而成的图像。

代码

<p id="math-function" style="width:600px;height:250px;"></p>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>

<script>
  TESTER = document.getElementById(&#39;math-function&#39;);

  var x = [], y = [];

  for(var i = -10; i < 10; i += 1) {
    x.push(i);
    y.push(2*i+1);
  }

  Plotly.plot(TESTER, [{
    x: x,
    y: y
  }], {
    margin: {t: 0}
  });
</script>

效果

函数图像

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过webpack项目如何实现调试以及独立打包配置文件（详细教程）

通过vue-cli+webpack项目如何实现修改项目名称

在vue组件中如何实现全局注册和局部注册

Atas ialah kandungan terperinci 详细解读plotly.js 绘图库使用教程（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在elementui中的默认样式如何修改？Artikel seterusnya：在AngularJS中如何创建上传照片的指令（详细教程）

Artikel berkaitan

Lihat lagi