Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
这里写自定义目录标题写在前面HTML代码写在前面暑假的时候帮老师测了几个开软库，有几个感觉还比较有意义，当时也花了一些时间认真整理，所以决定发到博客，希望给有需要的人一点帮助，也方便我今后自己直接查看。Plotly.js这个库还是比较有意思的，而且官方文档写的也很全面，看起来不难，就是有一些属性没有注释，可能猜不到它表示的是什么意思，因此本文档对属性进行了一些整理。因为是和同学一起测试了Plotl
·
目录
0 写在前面
暑假的时候帮老师测了几个开软库，有几个感觉还比较有意义，当时也花了一些时间认真整理，所以决定发到博客，希望给有需要的人一点帮助，也方便我今后自己直接查看。
Plotly.js这个库还是比较有意思的，而且官方文档写的也很全面，看起来不难，就是有一些属性没有注释，可能猜不到它表示的是什么意思，因此本文档对属性进行了一些整理。
因为是和同学一起测试了Plotly.js的基础图部分，因此我这里只发布我写的那部分，所以只有如文章标题写到的那七种图，里面很多方式都是通用的，其他图可以参考官网看看。
plotly.js下载地址：下载传送门
plotly.js官方文档：文档传送门
注：CSDN代码块好像无法设置底色，所以里面有部分‘查看灰色底代码’可能无法对应。
1 HTML代码
使用plotly.js可以将js和源文件放在一个html文件中，但是为了看起来更加清楚，因此采用html和js分离的方式介绍。
html代码如下，只要在<script src="scatter.js"></script>中将js文件名替换成你写的js文件即可。
<!-- code of html -->
<!DOCTYPE html>
<html>
<head>
<!-- Load plotly.js into the DOM -->
<title>plotly测试</title>
<script src='https://cdn.plot.ly/plotly-2.2.0.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<script src="scatter.js"></script> <!-- 插入你写的plotly的js代码 -->
</html>
2 折线图
折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。
2.1 基本折线图
//scatter.js
var trace1 = {
type: 'scatter', //确定类型为折线图
//轨迹的坐标
x: [1, 2, 3, 4], //横坐标值
y: [10, 15, 13, 17] //纵坐标值
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
折线图上的坐标值可以为数字或字符串，一个trace中的坐标轴数值可以同时有数字或者字符串，但是不同的trace中，如果它们不是同一个横纵坐标，那么坐标为字符串的需要排列在前，否则无法显示，图例解释如下。
//两条trace不同坐标轴，x、y轴都有字符串
var trace1 = {
x: ['a', 'b', 'c', 'd'], //trace1 x轴为字符串，需要排在trace2前面才能显示
y: [1, 2, 3, 4],
type: 'scatter'
};
var trace2 = {
x: [1, 2, 3, 4],
y: ['a', 'b', 'c', 'd'], //trace2 y轴为字符串，而trace1 y轴为数字，trace2排列在后面导致无法显示字符y轴
type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
2.2 复杂折线图
在这部分内容中，我们展示一张较为复杂的折线图，通过这个图来介绍折线图中常用的一些属性。
//code
//点
var trace1 = {
type:'scatter', //类型为折线
//坐标点数据
x: [1, 2, 3, 4],
y: [1, 2, 1, 2],
mode: 'markers+text', //模式
textposition: 'left', //文本相对点显示的位置
textfont:{size:14,color:'rgb(250,153,4)'},
name:'Yellow', //该trace的名称
text:['Yellow_node1','Yellow_node2','Yellow_node3','Yellow_node4'],
//点的属性
marker: {
color: 'rgb(255, 217, 102)', //颜色
size: 12, //大小
//点的边缘线属性，不写默认无边缘线
line: {
color: 'black',
width: 1
}
}
};
//线
var trace2 = {
type:'scatter',
x: [1, 2, 3, 4],
y: [2, 3, 2, 3],
mode: 'lines', //模式为仅线
name:'Red',
//线的属性
line: {
color: 'rgb(219, 64, 82)',
width: 3,
shape: 'spline' //线的形状，可以选择:['linear','spline','vhv','hvh','vh','hv']
}
};
//点+线，即常见的折线图
var trace3 = {
type:'scatter',
x: [1, 2, 3, 4],
y: [3, null, 3, 4],
mode: 'lines+markers', //模式为线+点
name:'Blue',
//线+点组合里，线和点的属性可以单独写
//点属性
marker: {
color: 'rgb(55, 128, 191)',
size: 8
},
//线属性
line: {
color: 'rgb(55, 128, 191)',
width: 2,
shape: 'linear'
},
connectgaps: true
};
//点+线，虚线1
var trace4 = {
type:'scatter',
x: [1, 2, 3, 4],
y: [4, 5, 4, 5],
mode: 'lines', //模式为线+点
name:'Purple-dashdot',
//线属性
line: {
color: 'rgb(142,124,195)',
width: 5,
shape: 'linear',
dash:'dashdot' //线的类型，可以选择点或直线，dash可以选择['dot','solid','dashdot']
}
};
//点+线，虚线2
var trace5 = {
type:'scatter',
x: [1, 2, 3, 4],
y: [5, 6, 5, 6],
mode: 'lines', //模式为线+点
name:'Orange-dot',
//线属性
line: {
color: 'rgb(250,153,4)',
width: 4,
//shape和dash可以组合使用
shape: 'spline',
dash:'dot'
}
};
//图像数据
var data = [trace1, trace2, trace3,trace4,trace5];
//布局属性
var layout = {
title: 'Line and Scatter Styling', //图像名称
//图像大小
width: 1000,
//height: 800,
//标题字体属性
font: {
family: 'Lato', //字体
size: 16, //文字大小
color: 'rgb(100,150,200)' //颜色
},
plot_bgcolor: 'rgba(200,255,0,0.1)',//图像背景
//x轴属性
xaxis: {
title: 'x-axis title', //x轴标签
//x轴字体属性
titlefont: {
color: 'black',
size: 16
},
//showline:true, //图像最左边的线
showgrid: false, //不显示y轴以外平行于y轴的参考线(网格线）,不写默认显示
zeroline: false, //不显示y轴
range: [0.75, 4.25], //显示范围
autorange: false //自动适应大小，不写默认自动适应，一般该属性和range搭配使用
},
//y轴属性
yaxis: {
title: 'y-axis title', //y轴标签
//y轴字体属性
titlefont: {
color: 'black',
size: 16
},
//showgrid: false, //不显示x轴以外平行于x轴的参考线(网格线）
showline: true,
zeroline: false, //不显示x轴
range: [0.25, 7],
autorange: false //自动适应大小，不写默认自动适应，一般该属性和range搭配使用
},
//图例相关属性
legend: {
yref:'paper', //竖直方向定位参考的位置
//yanchor:'bottom', //默认top
y: 1, //注释处于整个图像（竖直方向）的位置百分比，最下方为0，最上方为1
traceorder: 'reversed', //逆序注释排列
font: {
size: 15,
color: 'black'
}
},
//showlegend:false , //不显示图例
//注释属性
annotations:[{
text: 'these are annotations for scatter, you can write what you want to explain.',
//注释放置位置的参考
xref: 'paper',
yref: 'paper',
x: 0.2, //必须和xref搭配使用
y: -0.15,
xanchor: 'left', //3个取值,left&right¢er,默认left,写其他值都当默认处理
yanchor: 'bottom', //3个取值，top&bottom&middle,默认bottom,写其他值都当默认处理
showarrow:false,
font: {
family: 'Arial',
//size: 14,
color: 'rgb(150,150,150)'
}
}
]
};
Plotly.newPlot('myDiv', data, layout);
在这张图中，首先定义trace，也就是轨迹，然后将其存入数据列表data中，接着规定这些元素的布局layout，layout中包含了x轴，y轴，图例，注释等元素的相关属性取值，接下来分别总结一下这张折线图中用到的属性。
2.2.1 轨迹
复杂折线图中的五条轨迹定义的内容涵盖了折线图中大多数常用属性，为了方便起见，我们将这些属性放在一个trace中介绍。
var trace = {
type:'scatter', //类型为折线
name:'Yellow', //该轨迹的名称
//坐标点数据
x: [1, 2, 3, 4],
y: [1, null, 1, 2],
mode: 'lines+markers+text', //模式
textposition: 'left', //文本相对点显示的位置
//text的字体规定
textfont:{
family: 'Arial',
size:14,
color:'rgb(250,153,4)'
},
text:['Yellow_node1','Yellow_node2','Yellow_node3','Yellow_node4'], //轨迹上的点可显示的文本
//点的属性
marker: {
color: 'rgb(255, 217, 102)',
size: 12,
//点的边缘线属性，不写默认无边缘线
line: {
color: 'black',
width: 1
}
}，
//线的属性
line: {
color: 'rgb(219, 64, 82)',
width: 3,
shape: 'spline', //线的形状(直/曲/...)
dash:'dashdot' //线的类型(实/虚)
}，
connectgaps: true //数值缺少时，自动补全线
};
- type：要画出折线图，需要先规定trace的type属性为‘scatter’。
- name：确定折线的名字，如果没有写，则会默认为‘tracex’，x为数字。
- x/y列表：确定折线图中的每个点的坐标，这两个列表长度一致。
- mode：折线图模式选择，可以选择线‘lines’，点‘markers’，文本‘text’，或者这三者的任意排列选择（选两个也可）。点即坐标点，线为坐标点之间的连线，文本为对每个坐标点定义的显示内容，多模式用‘+’连接，比如‘lines+markers+text’表示显示点、线、文本都显示。
- textposition&textfont：只有当mode中选择了text之后这两个属性才有效。textposition定义文本在点周围显示的位置，可以选择‘top left’(左上)、‘top center’(中上)、‘top right’(右上)、‘middle left’(左中)、‘middle center’(中心)、‘middle right’(右中)、‘bottom left’(左下)、‘bottom center’(中下)、‘bottom right’(右下)模式，也可以只选‘top/middle/bottom/left/right/center’默认是‘middle center’(中心)模式。textfont定义文本显示字体属性，font属性一般包括family（字体），size（字体大小），color（颜色）。
- text：text定义轨迹上的点可显示的文本，这个列表和坐标一一对应，text的长度可以<=坐标个数，如果text长度t<坐标个数n，那么只显示前面t个点的text。如果mode没有选择‘text’，那么text内容只在鼠标放置在对应的点上悬浮出现，不直接显示。如果mode选择了‘text’，那么可搭配textposition和textfont两个属性来确定它显示的具体位置。
- marker：折线图上的坐标点相关属性，mode选择了‘markers’才有效。marker一般包括color（点的颜色），size（点的大小），以及line（点的框线/边缘线），其中line又可包括color（线的颜色），width（线的宽度）。如果不显示定义line，则默认无框线。
- line：折线图上的线相关属性，mode选择了‘lines’才有效，一般包含color（线的颜色），width（线的宽度），shape（线的形状，直线或者曲线…），dash（线的类型，实线或者虚线）。shape可以选择’linear’,‘spline’,‘vhv’,‘hvh’,‘vh’,‘hv’，默认‘linear’。dash可以选择’dot’,‘solid’,‘dashdot’，默认‘solid’。shape和dash的具体形状可以查看附录。
- connectgaps：差值连续，默认为false。当坐标点中有一个点不明确时，比如上面的y: [1, null, 1, 2],第二个点无法确认具体位置，如果不设置connectgaps为true，那么折线在x=2处会断掉，使得图像不连贯，设置connectgaps为true，会自动连接x=1和x=3处的点，这能让图像变得连续。
2.2.2 布局
在复杂折线图中，需要注意的是x轴，y轴，图例，注释这几个属性。
1) 首先看x轴与y轴属性：
//x轴属性
xaxis: {
title: 'x-axis title', //x轴标题
//x轴字体属性
titlefont: {
color: 'black',
size: 16
},
showgrid: false, //不显示y轴以外平行于y轴的参考线(网格线）,不写默认true
zeroline: false, //不显示y轴
range: [0.75, 4.25], //x轴显示范围
autorange: false //自动适应大小
},
//y轴属性
yaxis: {
title: 'y-axis title', //y轴标题
//y轴字体属性
titlefont: {
color: 'black',
size: 16
},
showgrid: true, //显示x轴以外平行于x轴的参考线(网格线）
showline:true, //图像最左边的线
zeroline: false, //不显示x轴
range: [0.25, 7], //y轴显示范围
autorange: false //自动适应大小
}
x轴与y轴里的相关属性适用于两者，可根据需要选择。
- title：x/y轴显示的标题。
- titlefont：标题显示的字体属性，同样可以选择family，color和size。
- range&autorange：range这个范围表示x/y轴上显示的范围，一般和autorange=false或不显式设置autorange搭配使用。autorange功能是自动适应图像大小，如果没有设置range，那么autorange默认为true，如果设置了range和autorange=true，那么autorange优先级高于range，仅执行自动适应大小。
为了更加清楚地描述剩下的属性，我们用下图介绍showgrid，zeroline，showline属性。
根据上图可以比较清晰地看出showgrid，zeroline，showline这三个属性的功能，xaxis和yaxis都拥有这三个属性。showgrid默认为true，zeroline默认为true，showline默认为false。
图中
xaxis：{showgrid：false，zeroline:true，showline:false};
yaxis：{showgrid：true，zeroline:true，showline:true};
2) 接下来介绍图例legend的相关属性(为介绍更加全面，下述属性比复杂折线图中给出的示例更多)：
//图例属性
legend: {
xref:'paper', //x轴方向参考的面，可省略
yref:'paper', //y轴方向参考的面，可省略
xanchor:'right', //图例x方向的定位处
yanchor:'bottom', //图例y方向的定位处
x:0.8, //图例处于整个图像（水平方向）的位置百分比
y: 1, //图例处于整个图像（竖直方向）的位置百分比
traceorder: 'reversed', //图例逆序排列
font: {
size: 15,
color: 'black'
},
bgcolor:'rgba(254, 237, 224,0)', //透明背景
},
首先需要确定legend的位置，这些通过xref,yref,xanchor,yanchor,x,y属性实现，不写默认在图像右上角。
- xref/yref：确定legend位置的参考对象，取值‘paper’即为相对于底层画布来确定位置。
- xanhor/yanchor：图像中图例这一块取一个点来放置在确定的位置（方便起见，简称这个点为锚点），这个确定的位置由x/y属性确定，xanchor可以取‘left’,‘center’,‘right’，legend中默认left ; yanchor可以取‘top’,‘middle’,‘bottom’,legend默认top。以下图举例：xanhor:‘left’，y:‘top’表示图例这一块的左上角那个点位于x和y属性规定的位置。
- x/y：x和y属性确定锚点放置的位置，取值为实数，含义为处在图像的某方向位置百分比（小数表示），可以认为显示的图像处于虚拟的坐标轴的（0,0），（0,1），（1,0），（1,1）围成的区域内，根据这个虚拟坐标轴来确定x和y的值，legend中x和y默认取1，即处在图像的右边最上方（顶边持平），处在图像的右边百分百，上方百分百的位置处。
- bgcolor：表示图例的背景颜色，默认与paper同色。
3) 图中有时需要一些注释，这些内容由annotations属性定义
annotations:[{
text: 'these are annotations for scatter, you can write what you want to explain.',
xref: 'paper',
yref: 'paper',
x: 0.2, //必须和xref搭配使用
y: -0.15, //必须和yref搭配使用
xanchor: 'left',
yanchor: 'bottom',
showarrow:false,
font: {
family: 'Arial',
//size: 14,
color: 'rgb(150,150,150)'
}
}
]
在注释属性中，位置的确定和legend一致，故不再解释。需要注意的是此时annotations中的xref和yref必须显示规定为‘paper’，否则无法正常显示出来，且xanchor默认取值‘left’，yanchor默认为‘bottom’。
- text：注释内容。
- showarrow：注释有一个小箭头在旁边标识位置，默认是显示的，可以通过设置showarrow为false来取消。
- font：确定注释的字体相关属性。
4）其他一些属性：
- title：图表的标题。
- width/height：定义图表大小，宽度和高度。
- font：layout中的一级font定义了整个图像的字体格式，如果其他的legend和annotations中没有定义font，那么就按照layout中的font显示。
- plot_bgcolor：仅图表（核心区域）的背景颜色。
3 饼状图
饼状图常用于统计学模型。饼状图显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼状图只有一个数据系列。）中各项的大小与各项总和的比例。饼状图中的数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼状图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）显示为整个饼状图。
3.1 基本饼状图
为避免冗余，接下来的图中已经出现过的属性不再介绍，新出现的属性会用灰色底标明。
首先介绍基本饼状图，代码和图像如下：
var data = [{
type: "pie", //类型为饼状图
values: [2, 3, 4, 4], //饼状图每个扇区的数值大小（占比）
name:'pie-chart',
labels: ["Wages", "Operating expenses", "Cost of sales", "Insurance"],
textinfo: "value+label+percent", //扇区显示的内容
textposition: "inside", //text显示在扇区的位置
insidetextorientation:'tangential', //扇区内显示内容的位置方位
hoverinfo: 'value+label+name+percent', //鼠标放置在饼图上时悬浮显示的内容
automargin: true //自动调整（增加）边距大小
}]
var layout = {
height: 400,
width: 400,
font:{
size:15,
color:'rgb(254,237,224)'
},
margin: {"t": 20, "b": 20, "l": 20, "r": 20}, //饼图边缘距离画布上下左右边界的距离，单位px
showlegend: true,
legend:{
font:{
size:12,
color:'black'
}
}
}
Plotly.newPlot('myDiv', data, layout);
最基本的饼状图其实只需要上面代码中的黄色底三行代码即可生成。其他用到的一些属性介绍如下：
- type：饼图中需要规定type为‘pie’。
- values：饼图内各扇区的数值大小，生成图时自动计算占比。
- labels：各扇区的标签，和values长度对应。
- textinfo：扇区中可显式的内容，可以选择‘value’，‘label’，‘percent’或者它们的任意搭配，用‘+’连接即可，也可以设置为‘none’不显示，默认‘percent’。
- textposition：text可以选择显示在扇区内或者扇区外，所以该属性有两种选择‘inside’和‘outside’，默认‘outside’。如果不显式确定该属性值且layout.font没有设定，那么会自动显示text，此时text有可能同时在扇区内和扇区外，
- insidetextorientation：当textposition选择‘inside’的时候，可以通过该属性决定text的显示方式，可以取值’auto’（自动）,‘horizontal’（水平）,‘radial’（平行直径方向）,‘tangential’（平行切线方向）。
- hoverinfo：鼠标放置在饼图的扇区中时悬浮显示的内容，可以取值‘value’，‘label’，‘name’，‘percent’，或它们之间的任意组合，用‘+’连接，只有一个饼图时默认‘value+label+percent’，如果有多个饼图在一张图中时候默认‘value+label+name+percent’，可以设置为‘none’取消。
- automargin：自动调整边距（图像距离底层画布的边距），一般会加大一点边距。
- layout.margin：图像的边距调整，t设置距离底层画布顶部的距离，b设置距离底部的距离，l和r分布设置距离画布左边和右边的距离，单位像素。
- layout.font：在饼图中的layout.font，如果textposition设置为‘inside’，那么扇区中的text不会严格按照font的设定来，而是会根据扇区的适应程度调整，如果textposition设置为‘outside’或者不设置，那么按照layout.font规定显示。
- layout.showlegend：是否显示图例，true为显示，false为不显示，默认显示。
3.2 饼图子图
有时候一张图像中可能出现多个饼图子图，此时需要使用域（domain）属性，domain允许将每个子图放在布局中定义的行和列的网格上，或者放置在由x和y数组定义的矩形内（折线图中的定义方法），下面的示例对前三个子图使用网格确定法，最后一个使用x、y定义法。
var allValues = [
[38, 27, 18, 10, 7],
[28, 26, 21, 15, 10],
[38, 19, 16, 14, 13],
[31, 24, 19, 18, 8]
];
var simpleLabels=['1st', '2nd', '3rd', '4th', '5th']
var simpleColors=['rgb(255, 217, 102)', 'rgb(219, 64, 82)', 'rgb(55, 128, 191)', 'rgb(250,153,4)', 'rgb(142,124,195)']
//可以根据需求定标签和着色
//var allLabels = [['01st', '02nd', '03rd', '04th', '05th'],
// ['11st', '12nd', '13rd', '14th', '15th'],
// ['21st', '22nd', '23rd', '24th', '25th'],
// ['31st', '32nd', '33rd', '34th', '35th']
// ];
//var ultimateColors = [
// ['rgb(255, 217, 102)', 'rgb(219, 64, 82)', 'rgb(55, 128, 191)', 'rgb(142,124,195)', 'rgb(250,153,4)'],
// ['rgb(177, 127, 38)', 'rgb(205, 152, 36)', 'rgb(99, 79, 37)', 'rgb(129, 180, 179)', 'rgb(124, 103, 37)'],
// ['rgb(33, 75, 99)', 'rgb(79, 129, 102)', 'rgb(151, 179, 100)', 'rgb(175, 49, 35)', 'rgb(36, 73, 147)'],
// ['rgb(146, 123, 21)', 'rgb(177, 180, 34)', 'rgb(206, 206, 40)', 'rgb(175, 51, 21)', 'rgb(35, 36, 21)']
//];
var data = [{
values: allValues[0],
labels: simpleLabels,
//labels:allLabels[0],
type: 'pie',
name: 'Starry Night',
marker: {
colors: simpleColors
//colors: ultimateColors[0]
},
domain: {
row: 0,
column: 0
},
hoverinfo: 'label+percent+name',
textposition:'outside'
},{
values: allValues[1],
labels: simpleLabels,
//labels:allLabels[1],
type: 'pie',
name: 'Sunflowers',
marker: {
colors: simpleColors
//colors: ultimateColors[1]
},
domain: {
row: 1,
column: 0
},
hoverinfo: 'label+percent+name',
textinfo: 'none',
},{
values: allValues[2],
labels: simpleLabels,
//labels:allLabels[2],
type: 'pie',
name: 'Irises',
marker: {
colors: simpleColors
//colors: ultimateColors[2]
},
domain: {
row: 0,
column: 1
},
hoverinfo: 'label+percent+name',
textinfo: 'label+percent',
textposition:'inside'
},{
values: allValues[3],
labels: simpleLabels,
//labels:allLabels[3],
type: 'pie',
name: 'The Night Cafe',
marker: {
colors: simpleColors
//colors: ultimateColors[3]
},
domain: {
x: [0.52,1],
y: [0, 0.5]
},
hoverinfo: 'label+percent+name',
textinfo: 'value+percent'
}];
var layout = {
title:'Pie-chart',
height: 400,
width: 500,
grid: {rows: 2, columns: 2}
};
Plotly.newPlot('myDiv', data, layout);
本小节主要介绍子图的布局方式，即上述代码中灰色底部分，首先需要在layout中规定好网格的大小，使用grid来确定网格的行列数，rows确定行数，columns确定列数。然后在data中确定子图数量，n个子图对应n个字典值。
每个子图中使用domain属性来确定它的位置，可以使用网格坐标确定，也可以使用数组定义。如使用前者，需要在domain中定义row和columns的取值，注意不要超过定义的网格数量，从0开始计数（如上述示例代码前三个子图）。如使用后者，需通过x和y定义的范围确定具体位置（如上述示例代码第四个子图）。
在示例代码中每个子图的labels和colors可以按需设置取不同值（如示例代码中注释的部分），不要求一致。
3.3 甜甜圈图
接下来介绍饼图的一种变种，甜甜圈图，即图像是圆环的饼图。
var data = [{
values: [16, 15, 12, 6, 5, 4, 42],
labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ],
domain: {column: 0},
name: 'GHG Emissions',
hoverinfo: 'percent+label+name', //
hovermode: 'compare',
hole: .4, //中间空白圈的大小
textinfo:'none', //省略百分比显示
textposition: "outside",
type: 'pie'
},{
values: [27, 11, 25, 8, 1, 3, 25],
labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ],
domain: {column: 1},
textposition: 'inside',
name: 'CO2 Emissions',
hole: .6,
type: 'pie'
}];
var layout = {
title: 'Global Emissions 1990-2011',
annotations: [
{
text: 'GHG',
font: {
size: 16
},
showarrow: false, //不显示标记箭头
//x和y的偏移量是根据整个图像来的，而不是根据单个的格空间
x: 0.19,
y: 0.5
},
{
font: {
size: 20
},
showarrow: false,
text: 'CO2',
x: 0.82,
y: 0.5
}
],
height: 400,
width: 600,
showlegend: false,
grid: {rows: 1, columns: 2}
};
Plotly.newPlot('myDiv', data, layout);
甜甜圈图中多一个hole的属性。
- hole：标记圆环当中空白圆圈的大小，取值为‘.x’，x为数字，注意需要在数字前加上‘.’。
在该示例中可以看到两个注释，如代码中的灰色部分，它们的位置确定也是相对于整个图像来说的，而不是以所在小范围网格为参考对象。
4 点图
点图，又叫点阵图，通过显示一系列数据的分布，来显示数据的集中性及分布。
//code
var country = ['Switzerland (2011)', 'Chile (2013)', 'Japan (2014)', 'United States (2012)', 'Slovenia (2014)', 'Canada (2011)', 'Poland (2010)', 'Estonia (2015)', 'Luxembourg (2013)', 'Portugal (2011)'];
var votingPop = [40, 45.7, 52, 53.6, 54.1, 54.2, 54.5, 54.7, 55.1, 56.6];
var regVoters = [49.1, 42, 52.7, 84.3, 51.7, 61.1, 55.3, 64.2, 91.1, 58.9];
var trace1 = {
type: 'scatter', //scatter中的markers
x: votingPop,
y: country,
mode: 'markers',
name: 'Percent of estimated voting age population',
marker: {
color: 'rgba(156, 165, 196, 0.95)',
line: {
color: 'rgba(156, 165, 196, 1.0)',
width: 1,
},
symbol: 'diamond-open-dot',
size: 16
}
};
var trace2 = {
type:'scatter',
x: regVoters,
y: country,
mode: 'markers',
name: 'Percent of estimated registered voters',
marker: {
color: 'rgba(204, 204, 204, 0.95)',
line: {
color: 'rgba(217, 217, 217, 1.0)',
width: 1,
},
symbol: 'circle',
size: 16
}
};
var data = [trace1, trace2];
var layout = {
title: 'Votes cast for ten lowest voting age population in OECD countries',
xaxis: {
showgrid: false,
showline: true,
linecolor: 'rgb(102, 102, 102)',
title:'x-axis-title',
titlefont: {
color: 'black',
size: 16
},
tickfont: {
color: 'black'
},
autotick: false, //自动刻度设置
dtick: 20, //刻度间距
ticks: 'inside', //tick在坐标轴上的位置
side:'bottom',
tickcolor: 'rgba(204, 204, 204, 1)'
},
margin: {
l: 140,
r: 40,
b: 50,
t: 100
},
legend: {
font: {
size: 10,
},
bgcolor:'rgba(254, 237, 224,0)', //透明背景
yanchor: 'bottom',
xanchor: 'right',
//y:1
},
width: 600,
height: 600,
paper_bgcolor: 'rgb(254, 247, 234)', //底层画布背景
plot_bgcolor: 'rgb(254, 237, 224)', //图像背景
hovermode: 'x' //悬停模式
};
Plotly.newPlot('myDiv', data, layout);
点图的本质实际是使用折线图中的散点来实现的，因此type选择‘scatter’，mode选择‘markers’。
- symbol：marker的形状可以选择，同时可以加上‘-open’或‘-dot’或‘-open-dot’选项，通过测试在js代码中marker可以选择的形状有’circle’, ‘square’, ‘diamond’, ‘cross’, ‘x’, ‘pentagon’, ‘hexagram’, ‘star’, ‘hourglass’, ‘bowtie’, ‘asterisk’, ‘hash’。具体的图例请查看附录。
- linecolor：设置showline显示的那条轴颜色。
- tickfont/tickcolor：用下图解释这两个属性，tickfont规定坐标轴刻度上的值的字体属性，tickcolor仅规定刻度那一小竖线的颜色。
](https://img-blog.csdnimg.cn/4280acd8b7bd4b06aadc7268472cf85b.png)
- dtick：规定刻度之间的间隔。
- ticks：规定刻度在坐标轴的上面或者下面，可以取值‘inside’或‘outside’。默认是‘outside’。
- side：规定坐标轴在图像上方还是下方，可以取值‘bottom’，‘top’，默认‘bottom’。
- autotick：自动设置刻度，可以选择false或者true，默认true。如果autotick=false且没有设置dtick，那么坐标轴会以1为距离显示刻度，非常密集。
- layout.paper_bgcolor：设置画布颜色。
- layout.hovermode：控制鼠标悬停信息显示模式，可以取值’closet’, ‘x’, ‘y’, ‘x unified’, ‘y unified’，默认‘closet’。
5 水平条形图
水平条形图即柱状图的柱呈水平方向延伸的图。
5.1 基础水平条形图
var trace1 = {
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
name: 'SF Zoo',
orientation: 'h',
marker: { //bar颜色
color: 'rgba(55,128,191,0.6)',
},
type: 'bar'
};
var trace2 = {
type:'bar',
x: [12, 18, 29],
y: ['giraffes', 'orangutans', 'monkeys'],
name: 'LA Zoo',
orientation: 'h',
type: 'bar',
marker: {
color: 'rgba(255,153,51,0.6)',
line:{width: 1}
}
};
var data = [trace1, trace2];
var layout = {
title: 'Colored Bar Chart',
barmode: 'stack' //bar的显示模式
};
Plotly.newPlot('myDiv', data,layout);
水平条形图即条形图的bar为水平状，因此type为‘bar’，同时需要设置orientation为’h’,意为水平。
- layout.barmode：设置bar的形态，可以选择堆叠‘stack’或分组‘group’，默认‘stack’。
5.2 水平条形图&折线图组合
接下来看一个较为复杂的水平条形图和折线图的组合图像。
//图像数据
var xSavings = [1.3586, 2.2623000000000002, 4.9821999999999997, 6.5096999999999996,
7.4812000000000003, 7.5133000000000001, 15.2148, 17.520499999999998
];
var xNetworth = [93453.919999999998, 81666.570000000007, 69889.619999999995, 78381.529999999999, 141395.29999999999, 92969.020000000004, 66090.179999999993, 122379.3];
var ySavings = ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'];
var yNetworth = ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'];
var trace1 = {
x: xSavings,
y: ySavings,
xaxis: 'x1',
yaxis: 'y1',
type: 'bar',
marker: {
color: 'rgba(50,171,96,0.6)',
line: {
color: 'rgba(50,171,96,1.0)',
width: 1
}
},
name: 'Household savings, percentage of household disposable income',
orientation: 'h'
};
var trace2 = {
type:'scatter',
x: xNetworth,
y: yNetworth,
xaxis: 'x2', //同一个y轴，不同x轴
yaxis: 'y1',
mode: 'lines+markers',
line: {
color: 'rgb(128,0,128)'
},
name: 'Household net worth, Million USD/capita'
};
var data = [trace1, trace2];
var layout = {
title: 'Household Savings & Net Worth for Eight OECD Countries',
xaxis1: {
range: [0, 20], //x1取值范围
domain: [0, 0.5], //x1占图的范围
zeroline: false,
showline: true,
showticklabels: true, //x轴上的数值显示，默认显示
showgrid: false
},
xaxis2: {
range: [25000, 150000],
domain: [0.5, 1],
zeroline: false,
showline: true,
showticklabels: true,
showgrid: true,
side: 'top', //坐标轴显示的位置
dtick: 25000，
linewidth:3
},
legend: {
x: 0.5,
y: 1.1,
xanchor:'center',
yanchor:'bottom',
font: {
size: 10
}
},
margin: {
l: 100,
r: 20,
t: 200,
b: 70
},
width: 600,
height: 600,
paper_bgcolor: 'rgb(248,248,255)',
plot_bgcolor: 'rgb(248,248,255)',
annotations: [
{
xref: 'paper',
yref: 'paper',
x: -0.2,
y: -0.109,
text: 'OECD ' + '(2015), Household savings (indicator), ' + 'Household net worth (indicator). doi: ' + '10.1787/cfc6f499-en (Accessed on 05 June 2015)',
showarrow: false,
font:{
family: 'Arial',
size: 10,
color: 'rgb(150,150,150)'
}
}
]
};
//图旁边的数字注释
for ( var i = 0 ; i < xSavings.length ; i++ ) {
var result = {
xref: 'x1', //以x1为参考线
yref: 'y1', //以y1为参考线
x: xSavings[i]+2.3,
y: ySavings[i],
text: xSavings[i] + '%',
font: {
family: 'Arial',
size: 12,
color: 'rgb(50, 171, 96)'
},
showarrow: false,
};
var result2 = {
xref: 'x2',
yref: 'y1',
x: xNetworth[i] - 20000,
y: yNetworth[i],
xanchor:'center', //默认值
yanchor:'middle',
text: xNetworth[i] + ' M',
font: {
family: 'Arial',
size: 12,
color: 'rgb(128, 0, 128)'
},
showarrow: false
};
layout.annotations.push(result, result2);
}
Plotly.newPlot('myDiv7', data, layout);
通过这个图主要可以学习两点：①当有多个坐标轴时如何安排它们的位置。②图像内的数值注释如何设定。这两部分代码在示例中标记为灰底。
- 对于第一点，在定义trace的时候需要增加xaxis与yaxis属性，根据需要设定值，这个值确定trace处在那一部分的坐标轴内。值为‘xn’/‘yn’…n为数字，从1开始。根据坐标轴个数在layout中定义好xaxis1/2…和yaxis1/2…，为了让它们在图像中和谐排布，需要规定它们显示的范围以及在图像中占据的位置，前者使用range属性，表明坐标轴上的刻度范围，后者使用domain属性，表示这个坐标轴在图像上占据的比例位置。
- 对于第二点，在图中的柱或散点旁显示数值注释，如果想要更加准确地确定显示的位置，需要以坐标轴为参考，因此annotations中xref和yref的值设置为它们所在的坐标轴（如示例代码中trace1处在x1和y1组成的坐标轴中，因此xref和yref分别为‘x1’,‘y1’），这样x和y这两个属性上的单位与坐标轴上的单位一致，相当于是在各个坐标系里找了一个点放置注释，所以x/y的取值幅度与坐标系原本的数据同步，最简单的就是在原本的数据上增加或减少一个值（如示例）。
为了美观一般将多个x轴交错放置，这里就可以使用xaxis.side属性。除此之外该示例中出现了新的属性xaxis.showticklabels和xaxis.linewidth，前者控制刻度上的数值是否显示，一般设置为‘true’，后者控制showline显示的那条线的宽度。
6 桑基图
桑基图，即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，其主要包括节点和流量两大模块。图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析，用来展示数据的流动性。
6.1 基本桑基图
var data = {
type: "sankey",
orientation: "h",
//节点相关属性
node: {
pad: 15, //节点之间的间隔，单位像素
thickness: 30, //节点的宽度
line: { //节点的边框线
color: "black",
width: 0.5
},
label: ["A1", "A2", "B1", "B2", "C1", "C2"], //节点的名称
color: ["blue", "blue", "blue", "blue", "blue", "blue"] //节点的颜色
},
//流量的流向
link: {
source: [0,1,0,2,3,3],
target: [2,3,3,4,4,5],
value: [8,4,2,8,4,2]
}
}
var data = [data]
var layout = {
title: "Basic Sankey",
font: {
size: 10
}
}
Plotly.react('myDiv', data, layout)
桑基图中规定type为‘sankey’，orientation为‘h’，即水平流向。该图主要由两大属性node以及link构成。前者是桑基图中的节点属性，后者是流量相关属性。
- node.pad：规定节点之间的间隔，单位像素。
- node.thickness：规定节点的宽度。
- node.line：节点外框线属性，一般包括color和width属性。
- node.label：节点的标签，即图中显示在节点旁的说明文字。
- node.color：节点的颜色，列表中的值和label中的值一一对应，可省略。
- link：流量的流向属性，包括source（流量源节点），target（流量目标节点），value（流量大小）。桑基图的节点个数本质上由link的source和target决定(真实的节点个数可以>label的长度，多出的节点无名称)，但为了方便起见一般以label为基准，按照它的下标确认节点的序号，以方便link的设定。以上述示例代码，根据link中的三个列表可以得知：从节点0流向节点2的流量为10，节点1流向节点3的流量为4…桑基图中需要满足的一个原则是能量守恒，不能出现流量丢失即流出的流量≠流入的能量的情况。
6.2 桑基图节点位置设置
桑基图中的节点位置可以自己按需设置，以下这个示例给出方法。
var data = {
type: "sankey",
arrangement: "snap", //没有x和y定位时，默认snap
orientation: "h",
node: {
pad:20, //节点之间的距离
thickness: 20,
line: {
color: "black",
width:1
},
label: ["SOURCE1", "SOURCE2", "SOURCE3","MIDDLE1", "DES1", "DES2", "DES3"],
//可以定义节点的具体位置
x: [0.2, 0.2, 0.2, 0.5, 0.8, 0.8,0.8],
y: [0.2, 0.5, 0.7, 0.4, 0.2, 0.6,0.9],
color: ["blue", "red", "blue", "yellow", "green", "blue","green"]
},
link: {
source: [0,1,0,2,3,3,3],
target: [3,4,4,5,5,6,4],
value: [8,4,2,8,4,2,2]
}
}
要给节点定位置，只需要在data中添加上面灰底的代码。
- x/y列表：定义节点在图像中的位置。
- arrangement：当显示定义了节点坐标之后，一般将arrangement属性值定为’snap’，这样可以防止节点重叠，即使坐标安排不当出现了重叠，‘snap’也可以自动处理去除重叠。
7 树状图
Plotly生成的树状图并不是严格的树形结构，而是以框的形式来描述树形定义。生成的树状图可以点击放大，也可以返回上一层。
7.1 基本树状图
data = [{
type: "treemap",
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ]
}]
Plotly.newPlot('myDiv', data)
基本树状图的data只包括type、labels、parents。树状图中type规定为‘treemap’，labels为树状图中的所有结点，parents列表和labels列表中的元素一一对应，按照上图示例代码，‘Eve’的父结点是空，因此它为根结点，‘Cain’，‘Seth’的父节点为‘Eve’，‘Enos’的父节点为‘Seth’…以此类推。
7.2 更多属性
接下来介绍树状图的更多属性。
var labels = ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"]
var parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
tree1={
type: "treemap",
branchvalues: "total", //计算一个item的总和方法
labels: labels,
parents: parents,
domain: {
x: [0, 0.48],
y: [0,1]
},
marker: {
line: {"width": 2,color:'black'}, //边框
colors: ["pink", "royalblue", "lightgray", "purple", "cyan", "lightgray", "lightblue",'green','yellow'] //color设置颜色
},
values: [55, 14, 12, 10, 2, 6, 6, 1, 4],
textinfo: "label+value+percent parent+percent entry",
outsidetextfont: {"size": 20, "color": "#377eb8"},
pathbar: {"visible": false}
};
tree2={
type: "treemap",
branchvalues: "remainder", //计算一个item的总和方法,默认remainder
labels: labels,
parents: parents,
values: [10, 14, 18, 10, 9, 6, 6, 1, 4],
textinfo: "label+value+current path+percent root+percent parent+percent entry",
marker: {
line: {"width": 1,color:'black'}, //边框
colors: ["pink", "royalblue", "lightgray", "purple", "cyan", "lightgray", "lightblue",'lightgreen','lightyellow']
},
domain: {
x: [0.52, 1],
y: [0,1]
},
outsidetextfont: {size: 20, "color": "black"},
pathbar: {"visible": true} //放大之后可以看到路径条
};
var data=[tree1,tree2]
var layout = {
annotations: [{
showarrow: false,
text: "branchvalues: <b>total</b>",
x: 0.25,
xanchor: "center",
y: 1.1,
yanchor: "bottom"
}, {
showarrow: false,
text: "branchvalues: <b>remainder</b>",
x: 0.75,
xanchor: "center",
y: 1.1,
yanchor: "bottom"
}]}
Plotly.newPlot('myDiv', data,layout)
- values：树状图的各结点可以通过values列表设置自己的值，values列表和labels列表一一对应。
- branchvalue：该属性决定父节点总值的计算方法，可以选择‘total’（父节点在values中设置的值就是它下面所有子节点在values中值的总和，计算叶子占父比就按照这个值算）或‘remainder’（父节点在values中设置的值仅仅是自己的，但是在树状图计算占比的时候，会将父节点下所有子节点的值加上当成父节点的总值来计算处理），默认‘remainder’。
- marker.colors：各结点（图中的框）的颜色，其也与labels对应，长度可以小于labels，没有设定颜色的结点自动选择颜色，如果整个图中有多棵树，那么只要其中一棵树A设置了该属性，其他树即使没有设置color，颜色分布也与A一致。
- textinfo：每个结点（框）显示的内容，可以选择‘label’，‘value’，‘current path’（当前路径），‘percent root’（占根节点百分比），‘percent parent’（占父结点百分比），‘percent entry’（占显示条目/整个框百分比）。
- outsidetextfont：根节点字体设置。
- pathbar.visible：当点击某结点放大时，该属性用来控制是否显示该结点的路径，取值false或true，默认true。
7.3 颜色设置
树状图有三种结点颜色设置方式，分别是①marker.color，②layout.treemapcolorway，③marker.colorscale。如果有多棵树，marker.color和marker.colorscale可以同时使用，这三种方法中，layout.treemapcolorway优先级最低。
第一种在前面已经有过示例，故本小节仅介绍后两种方法。
7.3.1 layout.treemapcolorway
在这里插入图片描述
treemapcolorway: ['lightgray',"pink",'lightblue','lightgreen','lightyellow'],
使用colorway只需要在layout中加上上面这一行代码即可，treemapcolorway属性同时控制整个图像中所有树的颜色，每种颜色对于根节点下的一颗子树。
7.3.2 marker.colorscale
当只设置示例中一棵树的colorscale为‘Reds’得到的图像：
//tree1
marker: {
line: {"width": 2,color:'black'}, //边框
colors: ["pink", "royalblue", "lightgray", "purple", "cyan", "lightgray", "lightblue",'green','yellow'] //color设置颜色
},
//tree2
marker: {
line: {"width": 1,color:'black'}, //边框
colorscale:'Reds' //color开头大写末尾+s
},
使用这个属性时需要注意的是取值为常见色彩的英文，开头大写，末尾+s，如‘Reds’，‘Greens’，‘Blues’等。
8 等值线图
等值线图又称等量线图。是以相等数值点的连线表示连续分布且逐渐变化的数量特征的一种图型。是用数值相等各点联成的曲线（即等值线）在平面上的投影来表示被摄物体的外形和大小的图。
//code
var trace1 = {
z: [[1.5, 1.23469387755, 1.01020408163, 0.826530612245, 0.683673469388, 0.581632653061, 0.520408163265, 0.5, 0.520408163265, 0.581632653061, 0.683673469388, 0.826530612245, 1.01020408163, 1.23469387755, 1.5], [1.36734693878, 1.10204081633, 0.877551020408, 0.69387755102, 0.551020408163, 0.448979591837, 0.387755102041, 0.367346938776, 0.387755102041, 0.448979591837, 0.551020408163, 0.69387755102, 0.877551020408, 1.10204081633, 1.36734693878], [1.25510204082, 0.989795918367, 0.765306122449, 0.581632653061, 0.438775510204, 0.336734693878, 0.275510204082, 0.255102040816, 0.275510204082, 0.336734693878, 0.438775510204, 0.581632653061, 0.765306122449, 0.989795918367, 1.25510204082], [1.16326530612, 0.897959183673, 0.673469387755, 0.489795918367, 0.34693877551, 0.244897959184, 0.183673469388, 0.163265306122, 0.183673469388, 0.244897959184, 0.34693877551, 0.489795918367, 0.673469387755, 0.897959183673, 1.16326530612], [1.09183673469, 0.826530612245, 0.602040816327, 0.418367346939, 0.275510204082, 0.173469387755, 0.112244897959, 0.0918367346939, 0.112244897959, 0.173469387755, 0.275510204082, 0.418367346939, 0.602040816327, 0.826530612245, 1.09183673469], [1.04081632653, 0.775510204082, 0.551020408163, 0.367346938776, 0.224489795918, 0.122448979592, 0.0612244897959, 0.0408163265306, 0.0612244897959, 0.122448979592, 0.224489795918, 0.367346938776, 0.551020408163, 0.775510204082, 1.04081632653], [1.01020408163, 0.744897959184, 0.520408163265, 0.336734693878, 0.19387755102, 0.0918367346939, 0.030612244898, 0.0102040816327, 0.030612244898, 0.0918367346939, 0.19387755102, 0.336734693878, 0.520408163265, 0.744897959184, 1.01020408163], [1.0, 0.734693877551, 0.510204081633, 0.326530612245, 0.183673469388, 0.0816326530612, 0.0204081632653, 0.0, 0.0204081632653, 0.0816326530612, 0.183673469388, 0.326530612245, 0.510204081633, 0.734693877551, 1.0], [1.01020408163, 0.744897959184, 0.520408163265, 0.336734693878, 0.19387755102, 0.0918367346939, 0.030612244898, 0.0102040816327, 0.030612244898, 0.0918367346939, 0.19387755102, 0.336734693878, 0.520408163265, 0.744897959184, 1.01020408163], [1.04081632653, 0.775510204082, 0.551020408163, 0.367346938776, 0.224489795918, 0.122448979592, 0.0612244897959, 0.0408163265306, 0.0612244897959, 0.122448979592, 0.224489795918, 0.367346938776, 0.551020408163, 0.775510204082, 1.04081632653], [1.09183673469, 0.826530612245, 0.602040816327, 0.418367346939, 0.275510204082, 0.173469387755, 0.112244897959, 0.0918367346939, 0.112244897959, 0.173469387755, 0.275510204082, 0.418367346939, 0.602040816327, 0.826530612245, 1.09183673469], [1.16326530612, 0.897959183673, 0.673469387755, 0.489795918367, 0.34693877551, 0.244897959184, 0.183673469388, 0.163265306122, 0.183673469388, 0.244897959184, 0.34693877551, 0.489795918367, 0.673469387755, 0.897959183673, 1.16326530612], [1.25510204082, 0.989795918367, 0.765306122449, 0.581632653061, 0.438775510204, 0.336734693878, 0.275510204082, 0.255102040816, 0.275510204082, 0.336734693878, 0.438775510204, 0.581632653061, 0.765306122449, 0.989795918367, 1.25510204082], [1.36734693878, 1.10204081633, 0.877551020408, 0.69387755102, 0.551020408163, 0.448979591837, 0.387755102041, 0.367346938776, 0.387755102041, 0.448979591837, 0.551020408163, 0.69387755102, 0.877551020408, 1.10204081633, 1.36734693878], [1.5, 1.23469387755, 1.01020408163, 0.826530612245, 0.683673469388, 0.581632653061, 0.520408163265, 0.5, 0.520408163265, 0.581632653061, 0.683673469388, 0.826530612245, 1.01020408163, 1.23469387755, 1.5]],
x: [-1.0, -0.857142857143, -0.714285714286, -0.571428571429, -0.428571428571, -0.285714285714, -0.142857142857, 0.0, 0.142857142857, 0.285714285714, 0.428571428571, 0.571428571429, 0.714285714286, 0.857142857143, 1.0],
y: [-1.0, -0.857142857143, -0.714285714286, -0.571428571429, -0.428571428571, -0.285714285714, -0.142857142857, 0.0, 0.142857142857, 0.285714285714, 0.428571428571, 0.571428571429, 0.714285714286, 0.857142857143, 1.0],
name:'Contour',
ncontours: 12, //等值线密度，数值越大密度越高
showscale: true, //默认true
type: 'contour'
};
var layout={
height:600,
width:1000
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data,layout);
等值线图中需要三维坐标轴，因此有x，y，z来存放数据，根据z的值确定等值线。
- type：等值线图需要设置type为‘contour’。
- ncontours：设置等值线密度，数值越大，等值线越紧密（密度越高）。
- showscale：控制尺度表是否显示，可取false或true，默认为true。
附录
line的shape属性视图
line的dash属性视图
marker的symbol属性视图
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
1- 0
已为社区贡献1条内容
所有评论(0)