详解plotly.js 绘图库入门使用教程


Posted in Javascript onFebruary 23, 2018

本文介绍了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>

效果

详解plotly.js 绘图库入门使用教程

点图

绘制数学图像

数学图像绘图的原理。比如说 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>

效果

详解plotly.js 绘图库入门使用教程

函数图像

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
javascript实现滚动条效果
Mar 24 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 #Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 #Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 #Javascript
Vue2 模板template的四种写法总结
Feb 23 #Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 #Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 #Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
任意位置显示html菜单
2007/02/01 Javascript
使用prototype.js进行异步操作
2007/02/07 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python实现二分法算法实例
2015/02/02 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python文件操作基本流程代码实例
2017/12/11 Python
详解python中的模块及包导入
2019/08/30 Python
python manage.py runserver流程解析
2019/11/08 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
爱心捐书活动总结
2014/07/05 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
未中标通知书
2015/04/17 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
祝酒词范文
2015/08/12 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python