如何用Julia的PlotlyJS绘制布尔数据等高线图并标记中心单元格

你的问题出在Plotly contour的坐标与单元格的对应逻辑上——3×3的z数组对应的是网格点而非单元格，直接用contour无法准确画出中心单元格的边框。这里提供两种简单有效的解决方案：

方案一：用Shape直接绘制中心单元格边框（推荐） #

这种方式更直观，直接在图上添加矩形边框标记目标单元格：

using PlotlyJS

z = [true true true 
    true false true 
    true true true]
x = range(1, 3)
y = range(1, 3)

# 可选：添加空白热力图作为网格背景
plt = heatmap(
    x = x,
    y = y,
    z = Int.(z),
    showscale = false,
    colorscale = [[0, "white"], [1, "white"]],
    hoverinfo = "skip"
)

# 添加中心单元格的黑色边框
relayout!(plt,
    shapes = [
        attr(
            type = "rect",
            x0 = 1.5, x1 = 2.5,  # 中心单元格的左右边界
            y0 = 1.5, y1 = 2.5,  # 中心单元格的上下边界
            line = attr(color = "black", width = 3)
        )
    ],
    xaxis = attr(range = [0.5, 3.5], tickvals = x),  # 让坐标轴覆盖完整网格
    yaxis = attr(range = [0.5, 3.5], tickvals = y)
)

plot(plt)

方案二：调整Contour参数适配单元格逻辑 #

如果坚持用contour，需要把z扩展为4×4的矩阵（对应3×3单元格的顶点），让中心单元格的顶点值与周围区分开：

using PlotlyJS

# 4×4顶点矩阵，中心四个顶点设为1，其余为0
z_contour = zeros(Int, 4, 4)
z_contour[2:3, 2:3] .= 1

x = range(1, 4)
y = range(1, 4)

plt = contour(
    x = x,
    y = y,
    z = z_contour,
    contours_coloring = "lines",
    contours_start = 0,
    contours_end = 1,
    contours_size = 1,
    colorscale = [[0, "black"], [1, "black"]],
    line_smoothing = 0,
    line_width = 3,
    showscale = false,
    xaxis = attr(range = [0.5, 4.5], tickvals = 1:3),  # 显示3×3网格的刻度
    yaxis = attr(range = [0.5, 4.5], tickvals = 1:3)
)

plot(plt)

两种方案都能精准标记3×3网格的中心单元格，方案一操作更简单，推荐使用。

内容的提问来源于stack exchange，提问作者mrW