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

最新推荐文章于 2025-06-02 09:02:58 发布

原创

最新推荐文章于 2025-06-02 09:02:58 发布 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#plotly.js #可视化图表

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

我工作中遇到的有：

折线图(lines , markers)
热力图(heatmap)
轮廓图(contour)
泡泡图（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 在坐标轴上显示自定义值