plotly入门(vue项目中)
这几天正好有时间,就来整理一下我的文档了,写这篇文章简单记录一下之前工作中用到的plotly,和大家分享一下我使用过的配置项。希望日后也可以帮助到有同样需求的人哈现在看来,当时第一次看到plotly的官网还是很懵逼哈哈哈,完成项目之后,也如释重负了!大家加油!
plotly安装
- 引入方式:详细描述参见文档:https://plotly.com/javascript/getting-started/ 本人就不过多赘述了哈!一般官网’快速上手’的操作,代码人都懂得~哈哈哈😂
- 官网地址:https://plotly.com/javascript/
配置项详解
说明:以下配置项仅仅是本人平时接触到的而已,不是对应官网的详细API讲解~如有记录有误 or 理解有误,欢迎指出,评论交流。
1. 设置图的大小
let layout = {
height: 400,
width: 400
};
效果图 :
2.1 移动图的位置
let layout2 = {
paper_bgcolor:'lightblue',
height: 400,
width: 400,
margin:{
t:10,
},
};
----------------------------------------------------------------------------------------------------------
layout.margin.l 距离画布左边的距离
layout.margin.r 距离画布右边的距离
layout.margin.b 距离画布底部的距离
layout.margin.t 距离画布顶部的距离
效果图:
2.2 移动图的位置
let data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
domain: {
row:1,
column:0
},
}];
let layoutOne = {
grid: {
rows:2,
columns:2
},
plot_bgcolor:'pink', //饼图的时候,设置的时候,不起作用
paper_bgcolor:'lightblue',
height: 400,
width: 400,
};
-------------------------------------------------------------------------------------------------------
layout.grid.rows 横向将画布分为几行
layout.grid.columns 纵向将画布分为几列
data.domain.row 控制横向位置
data.domain.column 控制纵向位置
效果图
3.设置图画布的颜色
let layout = {
plot_bgcolor:'red', //饼图的时候,设置的时候,不起作用
//(我理解是有x,y轴的图,才起作用)
paper_bgcolor:'lightblue',
height: 400,
width: 400,
};
----------------------------------------------------------------------------------------------------
layout.paper_bgcolor 整个画布之间的颜色
layout.plot_bgcolor x y轴区域内的颜色
效果图:
4.设置图上显示的文本
功能:
1.展示信息:不同类型的图,会默认展示不同的提示信息,可以根据需求自定义设置展示信息的格式(具体配置参数参考官网)
2.不展示信息:当数据量比较多时,有些提示信息就看不清,可以设置:
let layout = {
uniformtext:{ //设置比较小的占比数不显示
minsize:10,
mode:'hide',
},
paper_bgcolor:'lightblue',
height: 400,
width: 400,
margin:{
t:10,
},
};
效果图:
5.设置 X、Y轴的样式
功能:
layout.xaxis.autotick 是否按照图默认的刻度展示刻度值
layout.xaxis.zeroline 是否显示0刻度线(Boolean),默认是true,展示刻度线
layout.xaxis.tickangle 设置 x轴数据显示的倾斜角度(Number),可以是负数
layout.xaxis.color 设置x轴数据颜色(Rgb,Rgba…),通用的颜色格式都可以
layout.xaxis.ticktext 设置自定义设置x轴数据展示的文本(自定义展示格式)
layout.xaxis.tickvals 配合ticktext使用,这样才能映射到x轴的刻度(Array)
layout.xaxis.tickmode 配合ticktext使用,必须加,否则出不来效果(Array)
layout.xaxis.range 规定刻度显示的范围(Array)
layout.xaxis.dtick 规定刻度按照5隔开
layout.xaxis.showticklabels 是否绘制刻度线标签(Boolean),默认是true,
//以下全部以设置x轴为例,y轴参数类似
let layout = {
title: 'A & B',
xaxis:{
zeroline:false,//不显示0坐标轴
autotick:false, //是否按照默认刻度映射x轴的刻度
tickangle:-60, //设置刻度数据倾斜角度
color:'red', //设置x轴数据颜色
ticktext:[ //自定义展示样式。可以规定文本展示内容,文本渲染的颜色
"<span style=\"color:#FDDD8D\">C19</span>",
"<span style=\"color:#FDDD8D\">C20</span>",
"<span style=\"color:#FEF4C9\">C6(</span>",
],
tickvals:["0","1","2"] //和x轴的数据保持一致
tickmode:"array",//使用ticktext & tickvals就要加上此配置项,否则不会按照你规定的格式展示
range:[1,10],//规定刻度显示的范围
dtick:5, //规定刻度按照5隔开
showticklabels:false, //是否展示刻度
}
}
6.设置图例的样式
功能:
layout.legend.x 设置图例水平方向的位置
layout.legend.y 设置图例垂直方向的位置
layout.legend.bgcolor 设置图例区域的背景颜色
layout.legend.traceorder 设置图例排列顺序(可选参数:normal reversed grouped )
layout.legend.borderwidth 设置图例区域边框的宽度
layout.legend.bordercolor 设置图例区域边框的颜色
layout.legend.itemclick 设置图例的单击效果(Boolean),默认是true
layout.legend.itemdoubleclick 设置图例的双击效果(Boolean),默认是true
layout.legend.size 设置图例字的大小
let layout = {
legend:{
x:0,//设置图例水平方向的位置,可以是负数
y:0,//设置图例垂直方向的位置,可以是负数
bgcolor:'#ccc',//设置图例的背景颜色
traceorder:'normal', //调整图例展示顺序
//reversed参数 (按照传入数据的逆顺序排)
//normal参数 (按照数据占比的顺序排)
//grouped参数 (没看明白效果)
borderwidth:5,//设置图例的边框
bordercolor:'lightgreen',//设置图例边框的颜色
itemclick:false,//控制图例单击效果,设置成false之后,单击效果失效
itemdoubleclick:false,//控制双击图例效果,设置成false之后,双击效果失效
font:{
size:10, //设置图例字的大小
},
},
}
效果图:
7.设置图的导出格式
功能:
config.toImageButtonOptions.format 设置图导出的格式(svg,png,jpeg, webp…)
config.toImageButtonOptions.filename 设置图导出文件的命名
config.toImageButtonOptions.scale 设置图导出比例
config.modeBarButtonsToRemove 自定义工具栏
let config = {
toImageButtonOptions: {
format: 'svg', // 设置图片导出格式
filename: 'image',//设置导出命名
scale: 1 // 导出图片放大比例 1为不缩放
},
//移除图自带的工具
modeBarButtonsToRemove: ['toggleSpikelines','zoom2d','pan2d','select2d','lasso2d','autoScale2d']
};
效果图: