plotly入门(vue项目中)

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']
          };

效果图:
在这里插入图片描述
在这里插入图片描述

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一款简单易学的前端框架,下面我将用300字详细介绍如何进行Vue简单入门项目。 首先,你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI,使用以下命令: npm install -g @vue/cli 接下来,在命令行创建一个新的Vue项目vue create my-project 在创建过程,你可以选择使用默认配置或手动选择配置选项。这将根据你的项目需求而定。 创建完成后,进入项目目录: cd my-project 然后启动开发服务器: npm run serve 现在,你可以在浏览器打开http://localhost:8080来查看项目的运行情况。 接下来,你需要了解Vue的基本概念和语法。Vue使用组件化开发,你需要在src目录下创建一个Vue组件。组件可以包含模板、数据、方法等。你可以使用单文件组件(.vue文件)或分开的模板、脚本和样式文件。 在组件,你可以使用Vue的指令、数据绑定、事件处理等功能。可以通过改变数据和交互来构建动态的前端界面。 在项目,你可以使用Vue Router进行页面导航。你需要定义路由和对应的组件,然后在代码使用$route和$router来进行路由操作。 如果你需要调用后端接口,可以使用Vue的官方插件Vue Resource或者axios。这些工具可以帮助你发送HTTP请求并处理响应。 最后,当你完成了项目的开发,你可以使用npm run build命令打包你的项目。打包后的文件将会放在dist目录下,可以部署到服务器上。 以上就是一个简单的Vue入门项目的介绍。希望对你有帮助,祝你在Vue的学习和开发取得成功!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值