plotly.js 绘图库入门教程分享

本文主要和大家介绍了详解plotly.js 绘图库入门使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

Plotly

缘起

这两天想在前端展现数学函数图像,猜测应该有成熟的 js 库。

于是,简单的进行了尝试。

最后决定使用plotly.js,其他的比如function-plot 看起来也不错,以后有时间再看。

Plotly

plotly.js is the open source JavaScript graphing library that powers Plotly.

Plotly 可以称之为迄今最优秀的绘图库,没有之一。

简单案例

代码

nbsp;html>    plot 绘制图像

TESTER = document.getElementById('tester'); Plotly.plot(TESTER, [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }], { margin: {t: 0} });

登录后复制

效果

plotly.js 绘图库入门教程分享

点图

绘制数学图像

数学图像绘图的原理。比如说 y = 2*x+1,实际上就是一系列 (x,y) 的点连接而成的图像。

代码

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} });

登录后复制

效果

plotly.js 绘图库入门教程分享

函数图像

相关推荐:

分享Python如何利用plotly绘制数据图表的案例(图文)

以上就是plotly.js 绘图库入门教程分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2786049.html

(0)
上一篇 2025年3月8日 17:39:11
下一篇 2025年2月25日 13:23:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript构造器详解

    对构造函数有很好的理解是你掌握javascript这门语言的重点。我们都知道javascript不像其他语言,它没有class关键字,但是它有跟function非常相似的构造函数。这篇文章我们一起来详细地了解javascript构造函数如何…

    编程技术 2025年3月8日
    000
  • 详解Nodejs模块载入运行原理

    使用nodejs,就不可避免地引用第三方模块,它们有些是nodejs自带的(例:http,net…),有些是发布在npm上的(例:mssql,elasticsearch…) 本篇章聚焦3个问题: Nodejs模块的加…

    2025年3月8日 编程技术
    200
  • Node.js中的Async和Await函数解析

    本文主要和大家介绍了node.js中的async和await函数的相关知识,你将学习如何使用node.js中的async函数(async/await)来简化callback或promise.非常不错,具有参考借鉴价值,需要的朋友可以参考下,…

    编程技术 2025年3月8日
    200
  • 线浏览PDF文件的几个实用js插件

    在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又费力,本文主要给大家分享一系列使用jav…

    2025年3月8日 编程技术
    200
  • js弹窗基础讲解

    我们在一些实例中用到了alert()方法、prompt()方法、prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用…

    2025年3月8日 编程技术
    200
  • JS函数实例详解

    函数是由事件驱动的或者当它被调用时执行的可重复代码块,JavaScript函数语法,函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionname(){     这里是要执行的代码 } 当调用…

    编程技术 2025年3月8日
    200
  • js如何获取今天周几代码

    本文主要和大家分享js如何获取今天周几代码,希望能帮助到大家。   1.初级方法     var week = new Date().getDay(),str=’今天是星期’;    if(week === 0){str += ‘日’}..…

    编程技术 2025年3月8日
    200
  • js代码实现文档下载的方法

    在项目开发过程中,有时候没办法直接使用下载系统中的文件,可以采用以下方法去实现:  帮助  $(“#help”).on(“click”,function(){ var flag=window.confirm(“确定下载说明文档吗?”); /…

    编程技术 2025年3月8日
    200
  • js实现md5加密插件代码分享

    本文主要和大家分享js实现md5加密插件代码,希望能帮助到大家。 //使用方法://引入文件//var MD5=MD5.createMD5String(yourSrting);(function(globle,factory){//判断执行…

    编程技术 2025年3月8日
    200
  • 简单理解JS闭包

    JS中闭包是个很重要的概念,个人理解就是对函数调用者之间变量的访问控制的环境,本文将简单介绍一下什么是JS闭包。 function Person(){  var name=’stt’;  function sayName(){    con…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论