详解plotly.js 绘图库入门使用教程
程序员文章站
2022-04-01 09:27:45
本文介绍了plotly.js 绘图库入门使用教程，分享给大家，具体如下：
plotly
缘起
这两天想在前端展现数学函数图像，猜测应该有成熟的 js 库。
于是，简...
本文介绍了plotly.js 绘图库入门使用教程，分享给大家，具体如下：
plotly
缘起
这两天想在前端展现数学函数图像，猜测应该有成熟的 js 库。
于是，简单的进行了尝试。
最后决定使用，其他的比如 看起来也不错，以后有时间再看。
plotly
is the open source javascript graphing library that powers plotly.
plotly 可以称之为迄今最优秀的绘图库，没有之一。
简单案例
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>plot 绘制图像</title>
</head>
<body>
<div id="tester" style="width:600px;height:250px;"></div>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
tester = document.getelementbyid('tester');
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) 的点连接而成的图像。
代码
<div id="math-function" style="width:600px;height:250px;"></div>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<script>
tester = document.getelementbyid('math-function');
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>
效果
函数图像
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 谈谈JS中的!!
下一篇： 如何重置vue打印变量的显示方式