首頁 > 開發者 > JavaScript
詳解plotly.js 繪圖庫入門使用教程，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><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>
效果
函數映像
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
