用PlotlyJs绘制一个梯形

在PlotlyJs中，可以使用scatter和layout.shapes来绘制梯形。

首先，我们需要定义四个点的坐标：

var x = [0, 3, 5, 2];
var y = [0, 1, 4, 3];

然后，我们可以使用scatter来绘制这四个点：

var trace = {
  x: x,
  y: y,
  mode: 'markers',
  marker: {
    color: 'blue',
    size: 10
  }
};
var data = [trace];

接下来，我们需要使用layout.shapes来绘制梯形。shapes是一个数组，每个元素表示一个形状。我们需要定义一个类型为rect的形状，其四个角的坐标分别为(0,0)、(3,1)、(5,4)、(2,3)：

var layout = {
  shapes: [{
    type: 'rect',
    x0: 0,
    y0: 0,
    x1: 3,
    y1: 1,
    x2: 5,
    y2: 4,
    x3: 2,
    y3: 3,
    fillcolor: 'rgba(0,0,0,0)',
    line: {
      color: 'red'
    }
  }]
};

最后，我们将data和layout传入Plotly.newPlot即可绘制出梯形：

Plotly.newPlot('myDiv', data, layout);

完整代码如下：

var x = [0, 3, 5, 2];
var y = [0, 1, 4, 3];

var trace = {
  x: x,
  y: y,
  mode: 'markers',
  marker: {
    color: 'blue',
    size: 10
  }
};
var data = [trace];

var layout = {
  shapes: [{
    type: 'rect',
    x0: 0,
    y0: 0,
    x1: 3,
    y1: 1,
    x2: 5,
    y2: 4,
    x3: 2,
    y3: 3,
    fillcolor: 'rgba(0,0,0,0)',
    line: {
      color: 'red'
    }
  }]
};

Plotly.newPlot('myDiv', data, layout);