详解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 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
JavaScript中return false的用法
Mar 12 Javascript
Jquery获取radio选中的值
May 05 jQuery
JS实现的找零张数最小问题示例
Nov 28 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python解析xml模块封装代码
2014/02/07 Python
彻底理解Python list切片原理
2017/10/27 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
护理专业自我鉴定
2014/01/30 职场文书
个性车贴标语
2014/06/24 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
详细介绍python类及类的用法
2021/05/31 Python