javascript - Highcharts : cross symbol with fillColor

Question

但是，我无法更改十字的背景(如三 Angular 形符号)!有解决办法吗？

marker: {
    symbol: 'cross',
    fillColor: 'white',
    lineWidth: 4,
    lineColor: 'green',
    states: {
        hover: {
            fillColor: 'white', 
            lineWidth: 6
        }
    }
}

这是一个 fiddle : Fiddle with cross symbol

Answer 1

正如@SebastianBochan 在他的评论中所说，定义的“十字”符号只有两行，没有可填充区域:

return ['M', x, y, // move to position
        'L', x + w, y + h, // line to position
        'M', x + w, y, // move to position
        'L', x, y + h, // line to position
        'z']; // close the shape, but there's nothing to close!!

要制作可填充的 X，您需要一个带有面积的形状。这是我的快速尝试:

var distance = w/2;

return ['M', x - distance, y, 
        'L', x, y,
        'L', x + w/2, y + h/2 - distance/3,
        'L', x + w, y,
        'L', x + w + distance, y,
        'L', x + w, y + w/2,
        'L', x + w + distance, y + h,
        'L', x + w, y + h,
        'L', x + w/2, y + h/2 + distance/3,
        'L', x, y + h,
        'L', x - distance, y + h,
        'L', x, y + h /2,
        'L', x - distance, y,
        'z']

会产生这样的形状:

虽然不完美，但可以填充...

更新 fiddle here .