Plotlyjs layout shapes详细用法

PlotlyJS中的Layout Shapes是一种标记布局中某一区域的一种方法。

以下是关于Layout Shapes的详细用法：

1. 矩形形状

var layout = {
  shapes: [
    // 矩形示例
    {
      type: 'rect',
      x0: '2019-01-01',
      y0: 0,
      x1: '2019-06-30',
      y1: 100,
      fillcolor: '#d3d3d3',
      opacity: 0.3,
      line: {
        width: 0
      },
    },
  ]
};

1. 圆形形状

var layout = {
  shapes: [
    // 圆形示例
    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: '2019-03-01',
      y0: 50,
      x1: '2019-03-31',
      y1: 70,
      fillcolor: '#d3d3d3',
      opacity: 0.3,
      line: {
        width: 0
      },
    },
  ]
};

1. 直线形状

var layout = {
  shapes: [
    // 直线示例
    {
      type: 'line',
      x0: '2019-06-01',
      y0: 0,
      x1: '2019-06-30',
      y1: 100,
      line: {
        width: 2,
        color: 'red',
        dash: 'dot'
      },
    },
  ]
};

1. 路径形状

var layout = {
  shapes: [
    // 路径示例
    {
      type: 'path',
      path: 'M 0 0 L 50 50 L 100 0 Z',
      fillcolor: '#d3d3d3',
      opacity: 0.3,
      line: {
        width: 0
      },
    },
  ]
};

请注意，上述示例中的每个形状都有一个特定的“type”属性，该属性指定要创建的形状类型。此外，每个形状还具有其他属性，例如“x0”、“y0”、“x1”、“y1”等等，这些属性根据形状类型的不同而有所不同。

的type属性可取以下值：

• rect：矩形
• circle：圆形
• line：线段
• path：路径
• polygon：多边形
• image：图片

---

type为polygon的使用举例

using PlotlyJS

# 将数据加载到地图上
trace1 = scattergeo(
    locationmode = "USA-states",
    lon = [-74.0059, -77.0164, -80.1918, -71.0589, -80.8431],
    lat = [40.7128, 38.9047, 25.7617, 42.3601, 35.2271],
    mode = "markers",
    marker = dict(
        size = 8,
        color = "rgb(255,0,0)",
        line = dict(
            width = 1,
            color = "rgba(102, 102, 102)"
        )
    )
)

# 创建五边形区域的坐标点
polygon = [
    Dict("lat" => 40.7128, "lon" => -74.0059),
    Dict("lat" => 38.9047, "lon" => -77.0164),
    Dict("lat" => 25.7617, "lon" => -80.1918),
    Dict("lat" => 42.3601, "lon" => -71.0589),
    Dict("lat" => 35.2271, "lon" => -80.8431),
]

# 创建五边形区域的layout.shapes
five_sided_shape = Dict(
    "type" => "polygon",
    "xref" => "x",
    "yref" => "y",
    "line" => Dict(
        "color" => "rgb(0,0,255)",
        "width" => 2
    ),
    "fillcolor" => "rgba(0,255,0,0.2)",
    "opacity" => 0.5,
    "x" => [p["lon"] for p in polygon],
    "y" => [p["lat"] for p in polygon]
)

# 创建图表
layout = Layout(
    title = "Five-sided Shape",
    geo = dict(
        scope = "usa",
        projection = dict(type = "albers usa"),
        showland = true,
        landcolor = "rgb(250, 250, 250)",
        subunitcolor = "rgb(217, 217, 217)",
        countrycolor = "rgb(217, 217, 217)",
        countrywidth = 0.5,
        subunitwidth = 0.5
    ),
    shapes = [five_sided_shape]
)

data = [trace1]
fig = Figure(data, layout)
plot(fig)
 

更多Layout Shapes的信息可以在PlotlyJS官方文档中找到。