plotly入门(vue项目中)

凌晨一点的猫lx

已于 2024-01-21 16:46:03 修改

阅读量2.7k

点赞数 4

文章标签： vue.js 前端框架

于 2022-11-26 00:38:21 首次发布

本文链接：https://blog.csdn.net/qq_44092391/article/details/128046410

版权

本文档介绍了如何在Vue项目中使用Plotly进行图表配置，包括设置图的大小、移动位置、颜色、文本、轴样式、图例样式以及导出格式。通过实例代码展示了各配置项的用法，帮助开发者更好地理解和应用Plotly。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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