plotly.js图片库入门教程详解

本文介绍plotly.js图片库的入门教程，与大家分享如下：

阴谋地

起源

这两天想在前端展示一下数学函数的形象，猜测应该有成熟的js库。

于是，做了一个简单的尝试。

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

阴谋地

plotly.js是为plotly提供动力的开源JavaScript图形库。

Plotly堪称迄今为止最好的图片库，没有一个。

简单案例

密码

！doctype html head metharset=' utf-8 ' title绘图图像/title/headsdydiv id=' tester ' style=' width :600 px；' height:250px'/div/body script src=' http :https://cdn . plot . ly/plot ly-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 3360 { t : { 0 } })；/脚本/html效果

点图

绘制数学图像

数学图像绘制原理。例如，y=2*x 1实际上是由一系列(x，y)点连接而成的图像。

密码

div id=' math-function ' style=' width :600 px；' height:250px'/div script src=' http :https://cdn . plot . ly/plot ly-1 . 2 . 0 . min . js '/script script TESTER=document . getelementbyid(' math-function ')；var x=[]，y=[]；for(var I=-10；i 10I=1){ x . push(I)；y . push(2 * I ^ 1)；} Plotly.plot(TESTER，[{ x: x，y: y }]，{ margin : { t : 0 } })；/脚本效果

功能图像

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。