這篇文章內容來自自己工作中用到的可視化操作，偏向於科學圖表方面。網上資料多且雜，並且有的並不準確，不過如果時間充足，推薦看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 在座標軸上顯示自定義值
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官網