使用Plotly.js绘制图形

寿翰飞

2023-12-01

Plotly.js是一个绘图库，它有多种图表类型，包括 3D 图表，统计图表，和 SVG 地图，它具有较快快的性能。适合绘制数据量较大大的图形。而且它是免费的。
在示波器显示项目中，前端不停地调用服务端的dll动态库后，向设备请求波形数据，波形数据返回回来之后再发给前端，然后需要将数据绘制成图形显示再屏幕上。波形数据的点数一般在2000-4000个点，我们使用Plotly.js来实现图形展示。
1、安装

npm install plotly.js-dist

2、引入

import Plotly from 'plotly.js-dist'

3、创建一个图形很简单，只需要调用Plotly.newPlot()就可以了。
如下是将生成图形放在一个类里面了。

Plotly.newPlot(this.name, this.data, this.layout, this.config);

newPlot方法需要传入四个参数

我们需要在dom中为绘制图形准备一个div区域。

<div id="chart"></div>

第一个参数name就是这个绘图区域元素的id名。
第二个参数data
data是与绘图的所有数据，它是一个数组，数组的每项是一个对象。一个绘图区域可以绘制多根线，所以数组的一项对应一根线（轨迹）。
数据对象有非常多属性：

name：字符串。这根线的名字，将会在图例中显示的名字
mode：轨迹的绘制模式。不填用默认模式。
line：对象。关于这根线的配置
例如

line: {
        color: "rgb(228, 50, 204)",
        width: 1,
        shape: "linear", //"linear" | "spline" | "hv" | "vh" | "hvh" | "vhv"
      }

x：数组，x坐标的数据
y：数组，y坐标的数据

详细的数据对象

第三个参数layout，是关于绘图布局地配置对象。
这里面的配置项太多了，每一项都可以单独拿出来说半天。

margin：设置绘图区距容器四周的距离

margin: { l: 50, b: 20, r: 18, t: 15 },

paper_bgcolor：容器的背景颜色，
plot_bgcolor：绘图区的背景颜色
hovermode：悬停交互模式
showlegend：是否显示图例
legend：图例的配置对象
width：大于或等于10的数字，默认700；绘图区的宽度
height：大于或等于10的数字，默认450；绘图区的高度

legend: {//轨迹线图例
        bgcolor: "#2e2e2e",
        bordercolor: "#eaeaea",
        borderwidth: 1,
        font: {
          color: "#fff"
        },
        x: 0.8,
        y: 0.97
      },

xaxis：关于x轴的配置

this.layout.xaxis = {
      type: "linear",
      range: [0, this.max_x_range],
      tick0: 0,
      dtick: this.dtick_x,
      showticklabels: true, //确定是否绘制刻度标签。
      ticksuffix: 'ms',
      tickfont: {
        size: 11,
        color: '#fff'
      },
      fixedrange: false, //确定此轴是否可缩放。 如果为true，则禁用缩放。
      zerolinewidth: 1,
      zerolinecolor: "#999",
      zeroline: false, //确定是否沿此轴的0值绘制线条。 如果为“true”，则在网格线的顶部绘制零线。
      ticks: "inside",
      gridcolor: "#333",//格子线的颜色
      tickcolor: "#fff",//刻度线的颜色
      mirror: 'ticks' //确定轴线或/和刻度是否镜像到绘图区域的另一侧。 如果为“true”，则轴线被镜像。 如果“滴答”，则轴线和刻度将被镜像。 如果为“false”，则禁用镜像。 如果“全部”，则在所有共享轴子图上镜像轴线。 如果“allticks”，则在所有共享轴子图上镜像轴线和刻度线。
    };

yaxis：关于y轴的配置

 this.layout.yaxis = {
      type: "linear",
      range: [-this.max_y_range / 2, this.max_y_range / 2],
      tick0: 0,
      dtick: this.dtick_y,
      showticklabels: true,
      ticksuffix: 'V',
      tickfont: {
        size: 11,
        color: '#fff'
      },
      title: this.name.substr(0, 2) + this.name[this.name.length - 1],
      titlefont: {
        size: 12,
        color: "#fff"
      },
      fixedrange: false,
      zerolinewidth: 1,
      zerolinecolor: "#999",
      // zeroline: false, 
      ticks: "inside",
      gridcolor: "#333",
      tickcolor: "#fff",
      mirror: "ticks"
    };

详细的layout配置对象

第四个参数config，关于图形操作的配置

{
      displayModeBar: true,//是否显示模式栏
      scrollZoom: true,//是否可滚动缩放
      editable: false,//在可编辑模式下，用户可以编辑图例中的图表标题、轴标签和跟踪名称。
      doubleClickDelay: 0,//双击延迟
      // staticPlot: true //完全静态，不可缩放拖动
    };

详细的config配置对象

plotly的方法
1、Plotly.relayout(graphDiv, update)
第一个参数graphDiv就是绘图容器的id名；
第二个参数update是更新对象，其属性同layout
例：

var update = {
    title: 'some new title', // updates the title
    'xaxis.range': [0, 5],   // updates the xaxis range
    'yaxis.range[1]': 15     // updates the end of the yaxis range
}

2、Plotly.deleteTraces(this.name, index);
从指定的name绘图区中删除指定索引的轨迹线

3、 Plotly.addTraces(this.name, data);
在指定name的绘图区增加一个轨迹线；
数据不停地来，怎么在试图不停地更新图形，让图形动起来。
我们可以在数据每次更新时，删除旧的轨迹，再添加新的轨迹，从而达到更新图形的目的。

4、Plotly.purge(this.name);
清除绘图区

plotly的方法

plotly的事件
1、plotly_relayout事件
在图形更新时触发，例如缩放、拖动造成的图形更新都会触发此事件。
2、plotly_afterplot事件

事件详细

使用Plotly.js绘制图形

相关阅读

相关文章

相关问答

相关文档