plotly.js 常见图形使用 常见图形操作 折线图 热力图 轮廓图 泡泡图 图点击事件

这篇文章内容来自自己工作中用到的可视化操作,偏向于科学图表方面。网上资料多且杂,并且有的并不准确,不过如果时间充足,推荐看plotly.js的英文官网,也提供搜索功能,只是需要对图表很熟悉并且英文要好。本文也是做一个工作的总结和网上资源的整理,把自己工作中遇到的分享出来,让后用者少走弯路,也当做一份笔记。

我工作中遇到的有:

  1. 折线图(lines , markers)
  2. 热力图(heatmap)
  3. 轮廓图(contour)
  4. 泡泡图(scatter)

折线图

1 指数表示法
照例先上图片再上代码:
在这里插入图片描述

    getLinesOfEpm:function (eid,data,title) {
   
   
            //var title =title||" ";
            var layout = {
   
   
                height:400,
                width:550,
                title:title||" ",
                // showlegend:false,
                titlefont:{
   
   size:25},
                hovermode:false,
               // hoverinfo:"y",
                yaxis: {
   
   
                     exponentformat: "E"//指数表示法
                    ,type:"log"
                    ,side:"left"
                       , range:[-14,0]
                       ,dtick:1
                }
                ,xaxis : {
   
   
                dtick:2
                    ,range:[-30,30]
            }

            };

            var  data_line = data;
            Plotly.newPlot(eid, data_line,layout);

        }

其中layout下yaxis下的exponentformat:"E"属性和type:“log”,就是使用指数表示法,这在科学计算里很常用。range:[-14,0]指的是从*10^-0
到 *10^-14 次方 ,dtick:1表示坐标轴的间隔为1,表示在y轴上范围为-14-0 次,并且 共有14个点,间隔为1。
2 在坐标轴上显示自定义值

getLinesOfNbtis:function (eid<
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值