这篇文章内容来自自己工作中用到的可视化操作,偏向于科学图表方面。网上资料多且杂,并且有的并不准确,不过如果时间充足,推荐看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<