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']
                    这几天正好有时间，就来整理一下我的文档了，写这篇文章简单记录一下之前工作中用到的plotly，和大家分享一下我使用过的配置项。希望日后也可以帮助到有同样需求的人哈~完成项目之后，也如释重负了！大家加油！
				vue-plotly plotly.js的薄vue包装器它提供：所有plotly.js方法和事件数据React性重新调整大小后重新绘制Live示例https：//david-vue-plotlyplotly.js的薄vue包装器它提供：所有plotly.js方法和事件数据React性重新调整大小后的实时示例https://david-desmaisons.github.io/vue-plotly/用法
从'vue-plotly'导入{Plotly}导出默认{组件：{Plotly}，data：{data：[{x：[1,2,3,4]，y：[10,15,13,17]，类型：“散布图”}]，布局：{标题：“我的图表”
Flask+plotly实现数据可视化（点击查看）
安装VUE：
准备采用 npm（Nodejs下的包管理器）的方式安装vue,所以第一步安装 node , 官网下载安装即可
安装完成之后在 command prompt  运行  node -v , 便可查看到安装的nodejs 的版本，说明安装成功；
npm 是集成在node中的，也可以运行： npm -v 查看安装的npm 版本：
安装cnpm：
npm insta
				Plotly.js是一个绘图库，它有多种图表类型，包括 3D 图表，统计图表，和 SVG 地图，它具有较快快的性能。适合绘制数据量较大大的图形。而且它是免费的。
在示波器显示项目中，前端不停地调用服务端的dll动态库后，向设备请求波形数据，波形数据返回回来之后再发给前端，然后需要将数据绘制成图形显示再屏幕上。波形数据的点数一般在2000-4000个点，我们使用Plotly.js来实现图形展示。
npm install plotly.js-dist
import Plotly from 
				大佬看到这里就可以走了， 小白可以继续看了，本篇文章只是【plotly】入门级
注意：本篇文章使用的是离线版本的plotly，没有用线上版的，直接在pycharm上运行的。
入门篇 plotly安装 `plotly`导入`plotly`模块example1 `Scatter`example2 `Bar`example3 `Histogram`example4 `Express`example5 `pie`example6 `3D`example7 `Densitymapbox``plotly`官方文档：
这两天想在前端展现数学函数图像，猜测应该有成熟的 js 库。
于是，简单的进行了尝试。
最后决定使用plotly.js，其他的比如function-plot 看起来也不错，以后有时间再看。
Plotly
plotly.js is the open source JavaScript graphing library that powers Plotly.
Plotly 可以称之为迄今最优秀的绘图库，没有之一。
<!DOCTYPE html>
				plotly是开挂的作图神器，可以供js, python, R, DB等使用。具体见官网plotly官网1. 安装pip install plotly更新pip install plotly --upgrade2. 在线使用，画的图会存入云账户中import plotly#设置用户名和API-Key
plotly.tools.set_credentials_file(username='DemoAc
				好的，App.vue 是 Vue.js 项目中的主组件，它是所有其他组件的容器。在一个 Vue.js 项目中，所有的 Vue 组件都可以被嵌套在 App.vue 中。App.vue 通常包含了整个应用程序的布局和导航，可以用来定义全局的样式和主题。
在 App.vue 中，我们可以定义应用程序的顶部导航栏、底部选项卡、侧边栏和其他全局组件。我们还可以使用 Vue.js 的路由功能来定义应用程序的路由和视图，将不同的页面和组件显示在 App.vue 中的不同位置。
总之，App.vue 是 Vue.js 项目中非常重要的一个组件，它可以帮助我们快速构建一个具有良好体验和可维护性的应用程序。