在Highstock中显示带字母的自定义SVG标记实现咨询

一、基础SVG结构编写 #

你可以直接编写带字母的SVG图形，核心是用<text>元素把字母放在形状内部。比如一个带字母"A"的圆形标记：

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制圆形背景 -->
  <circle cx="20" cy="20" r="18" fill="#ffffff" stroke="#000000" stroke-width="2"/>
  <!-- 添加字母 -->
  <text x="20" y="25" font-family="Arial" font-size="18" font-weight="bold" text-anchor="middle" fill="#000000">A</text>
</svg>

二、关键参数说明 #

• 形状元素：用<circle>、<rect>等基础元素绘制标记外框，cx/cy/r控制圆形位置和大小，x/y/width/height控制矩形参数。
• 文本元素：<text>里的x和y控制字母位置，text-anchor="middle"让文字水平居中，y值要稍大于形状中心（因为文本基线默认在下方），保证字母垂直居中。
• 样式调整：通过fill设置填充色，stroke设置边框色，font-size/font-weight调整文字样式。

三、在图表工具中使用 #

如果是用Matplotlib、Plotly这类可视化工具：

1. 把上述SVG代码保存为.svg文件，比如marker_A.svg。
2. 在工具中导入自定义标记：
   • Matplotlib示例：

     from matplotlib.markers import MarkerStyle
     import matplotlib.pyplot as plt
     
     # 加载SVG作为标记
     marker = MarkerStyle(marker='path')
     marker._path = plt.matplotlib.path.Path.fromstring(open('marker_A.svg').read())
     
     # 绘图时使用该标记
     plt.scatter(x_data, y_data, marker=marker, s=100)
     

   • Plotly示例：

     import plotly.express as px
     
     fig = px.scatter(df, x="x_col", y="y_col")
     # 直接在marker中指定SVG路径
     fig.update_traces(marker=dict(
         symbol='url(marker_A.svg)',
         size=20
     ))
     

四、批量生成不同字母的标记 #

如果需要多个带不同字母的标记，可以用脚本批量生成SVG：

import svgwrite

def generate_letter_marker(letter, filename):
    dwg = svgwrite.Drawing(filename, size=('40px', '40px'), viewBox='0 0 40 40')
    # 绘制圆形
    dwg.add(dwg.circle(center=(20,20), r=18, fill='white', stroke='black', stroke_width=2))
    # 添加字母
    dwg.add(dwg.text(letter, insert=(20,25), font_family='Arial', font_size='18', 
                     font_weight='bold', text_anchor='middle', fill='black'))
    dwg.save()

# 生成A-Z的标记
for letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ':
    generate_letter_marker(letter, f'marker_{letter}.svg')

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