plotly.js 原生 marker.symbol 不支持直接渲染 ascii 字符（如 '[' 或 ']'），需改用 mode: 'lines+text' 配合 text 属性实现类标记效果，并通过 textfont 精确控制样式。

plotly.js 原生 marker.symbol 不支持直接渲染 ascii 字符（如 '[' 或 ']'），需改用 mode: 'lines+text' 配合 text 属性实现类标记效果，并通过 textfont 精确控制样式。

在 Plotly.js 中，marker.symbol 仅接受预定义的几何符号（如 'circle'、'square'、'x' 等），不支持任意 Unicode 字符或 HTML 实体作为 marker。因此，像 symbol: '[' 这样的写法会被静默忽略，回退至默认圆形标记。

✅ 正确方案：使用 mode: 'lines+text' 替代 'lines+markers'，将自定义字符作为文本标签（text）叠加在数据点上，并通过 textfont 控制其大小、颜色与对齐行为，从而模拟“自定义 marker”的视觉效果。

以下为完整可运行示例：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

  <title>Custom Bracket Markers in Plotly.js</title><script src="https://cdn.plot.ly/plotly-latest.min.js"></script><div id="graph-1" style="width: 600px; height: 400px;"></div>
  <script>
    const x = [1, 2, 3, 4];
    const y = [2, 4, 3, 5];

    // ✅ 自动生成 '[' 符号数组（长度与数据点一致）
    const leftBrackets = Array(x.length).fill('[');
    // ✅ 或混合使用：['[', ']', '[', ']']
    // const mixedBrackets = ['[', ']', '[', ']'];

    const data = [{
      x,
      y,
      mode: 'lines+text', // 关键：禁用 marker，启用 text 渲染
      line: {
        shape: 'linear',
        color: '#1f77b4',
        width: 2
      },
      text: leftBrackets, // 每个点对应一个字符
      textposition: 'middle center', // 确保字符精准居中于坐标点
      textfont: {
        size: 22,
        color: '#1f77b4',
        family: 'monospace' // 可选：使用等宽字体增强对齐一致性
      },
      hoverinfo: 'x+y+text' // 保留悬停信息（含字符）
    }];

    const layout = {
      title: "Graph-1: Custom '[' Markers",
      showlegend: false,
      xaxis: { zeroline: false },
      yaxis: { zeroline: false }
    };

    Plotly.newPlot('graph-1', data, layout);
  </script>

⚠️ 注意事项：

• textposition: 'middle center' 是关键配置，确保字符严格对齐数据点坐标；若省略，文本可能偏移（默认为 'top center'）；
• 若需同时显示数值标签和自定义符号，可使用 text: ['[', 'value: 4', '[', ...] 混合内容；
• textfont.family 推荐设为 'monospace'，避免不同字符宽度导致的水平错位；
• 此方法不支持 marker.size 的缩放逻辑，所有字符统一按 textfont.size 渲染；如需响应式尺寸，需结合 window.resize 手动重绘；
• 若后续需添加图例、多轨迹或交互高亮，建议封装为独立 trace 并合理设置 name 与 showlegend。

该方案无需 SVG 注入、无外部依赖，完全基于 Plotly 原生 API，简洁、可靠且易于维护。