如何在Plotly.js中使用'['和']'作为自定义标记符号

方案1：文本标记法（非SVG，优先推荐） #

Plotly内置标记符号不支持直接用[或]这类普通字符，不过可以用文本替代标记的方式实现，完全不需要SVG：

修改你的index.js代码如下：

graph_1_data = [{
    x: [1, 2, 3],
    y: [1, 2, 3],
    mode: 'lines+text', // 用text替代markers
    line: {
        shape: 'linear',
        color: 'blue'
    },
    text: ['[', '[', '['], // 每个数据点对应要显示的符号
    textposition: 'middle center', // 让文本居中对齐数据点
    textfont: {
        size: 20, // 控制符号大小，替代marker.size
        color: 'red' // 控制符号颜色，可自定义
    }
}]
graph_1_layout = {
    title: "Graph-1"
}
Plotly.newPlot('graph-1', graph_1_data, graph_1_layout);

如果需要用]，只需要把text数组里的内容换成']'即可。

方案2：自定义SVG路径标记 #

如果一定要用marker.symbol实现，可以自定义SVG路径来绘制[或]：

示例代码（以[为例）：

graph_1_data = [{
    x: [1, 2, 3],
    y: [1, 2, 3],
    mode: 'lines+markers',
    line: {
        shape: 'linear',
        color: 'blue'
    },
    marker: { 
        // 自定义[的SVG路径，path://开头
        symbol: 'path://M 0 10 L 0 0 L 3 0 L 3 10 Z M 5 10 L 5 0 L 8 0 L 8 10 Z',
        size: 15,
        color: 'red'
    }
}]
graph_1_layout = {
    title: "Graph-1"
}
Plotly.newPlot('graph-1', graph_1_data, graph_1_layout);

如果要实现]，只需要调整SVG路径的坐标，比如把左右翻转：

symbol: 'path://M 8 10 L 8 0 L 5 0 L 5 10 Z M 3 10 L 3 0 L 0 0 L 0 10 Z'

内容的提问来源于stack exchange，提问作者Benny Lazarus Kamal