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,data,title) {
            //var title =title||" ";
            var layout = {
                height:400,
                width:520,
                title:title||" ",
                // showlegend:false,
                titlefont:{size:25},
                hovermode:false
                ,xaxis:{
                    //显示的值与实际表示的值
                    tickmode:"array"
                    ,tickvals:[-10,-5,0,5,10,15,20,25]
                    ,ticktext:["dark","Photo","0","100","300","500","3600","7200"]
                    ,range:[-11,26]
                }
                ,yaxis:{
                    range:[-21,11]
                }
            };

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

        }

看xaxis属性，tickmode,tickvals,ticktext是必须有的，他们是一一对应的。
3 同时显示点及线
设置mode:“lines+markers”

4 map图的点击事件plotly_click无效
map图平时用的功能官网上的例子就满足了，根据官网照着拿下来就可以，其中需要注意和填坑的地方是，如果想在map图上添加点击事件，需要把layout下hovermode:true设置好，否则写好的点击事件，也不会触发，并且没有任何提示！
5 map图及contour图(轮廓图) 颜色设置

  var colorscaleValue = [
                [0, 'rgb(248,105,107)'],
                [0.5, 'rgb(255,235,132)'],
                [1,'rgb(99,190,123)']
            ];

这个是excel其中一个颜色的设置，比较常用。设置colorscale这个属性就可以改变图的颜色区间。
6 泡泡图
plotly.js上提供的示例泡泡图多用于地图的显示，依靠地理位置的定位画泡泡图，而我工作中需要在普通坐标系中根据坐标点画泡泡图，所以我使用的还是scatter，并不是scattergeo。
如下图：

这个图代码如下：

getPopScatter:function (id,innerData) {
           var arr =  innerData.size;
            var calResult = calVthmedium(arr);
            var vthMean = calResult[0];
            var calMin = calResult[1];
            var vthVariace = 0.5;
            var newArr = transformValue(arr,vthMean,vthVariace,calMin);
            newArr =newArr.map(x=>x==0?x:x+30);
            var maxcolor = Math.max.apply(null,newArr);var mincolor = Math.min.apply(null,newArr);
            var DataText = innerData.text;
            DataText = DataText.map(x=>Number(x));
            for (var  i=0;i<DataText.length;i++){
                if(DataText[i]<-20||DataText[i]>20){
                    DataText[i] = "✖";
                }
            }
   
            var colorscaleValue = [
                [0, 'rgb(248,105,107)'],
                [0.5, 'rgb(255,235,132)'],
                [1,'rgb(99,190,123)']
            ];
            var trace1 = {
                x: innerData.x,
                y: innerData.y,
                mode: 'markers+text',
                type: 'scatter',
                name: innerData.info,
                text: DataText,
                textposition: 'top center',
                textfont: {
                    family:  'Raleway, sans-serif'
                }
                , marker: { size: newArr,color:newArr,cmin:mincolor,cmax:maxcolor }
                ,colorscale:colorscaleValue
            };


            var data = [ trace1 ];

            var layout = {
                xaxis: {
                    dtick:30,
                    range: [-300, 300]
                },
                yaxis: {
                    dtick:30,
                    range: [-300, 300]
                },
                legend: {
                    y: 0.5,
                    yref: 'paper',
                    font: {
                        family: 'Arial, sans-serif',
                        size: 20,
                        color: 'grey',
                    }
                },
                hovermode:"closest"
                ,title:innerData.glassName
            };

            Plotly.newPlot(id, data, layout);
        }

实现思路：根据scatter的marker可以传递数组的特性，并且可以设置marker的大小，设置marker的color属性，达到根据数据显示不同大小，不同颜色的点位图。
hovermode这个属性很有用，如果不主动设置，如果你有2个泡泡点位x轴一样，比如{0,100},{0,-100}这2个点位，那么这个hover和click属性只会根据x的值来定，也就是这2个点会共享一个x=0点位的点击事件和悬停事件，而且当悬停时，会把经过该x点的2个点的值一起显示出来，不方便分辨和查看。设置成closest，才会区分开，这个是需要填坑和注意的地方。

xaxis： 多为x轴上的属性设置 同样的有yaxis
有一个
layout: 多为整体图表的属性设置 如他的width属性：高度，title属性：图表标题
https://plot.ly/javascript/ plotly.js官网