Highcharts：用fillColor交叉符号

Question

然而，我无法改变十字架的背景（如三角形符号）！ 有解决方案吗？

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

这是一个小提琴： 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']

会产生这样的形状：

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

更新了小提琴here。

Answer 2

我创造了一个可填充的十字架，灵感来自这篇文章。十字架与微软ASP图表的十字符号非常相似（我的目标是复制该十字符号）。

这就是我所做的：

Highcharts.Renderer.prototype.symbols.cross = function (x, y, radius) {
    var r = radius * 0.4,
        e = r * 0.8,
        a = e / Math.sqrt(2),
        p = r / Math.sqrt(2);
    return [
        'M', x, y + a,
        'L', x + p, y + a + p,
        x, y + a + (2 * p),
        x + a, y + (2 * a) + (2 * p),
        x + a + p, y + (2 * a) + p,
        x + a + (2 * p), y + (2 * a) + (2 * p),
        x + (2 * a) + (2 * p), y + a + (2 * p),
        x + (2 * a) + p, y + a + p,
        x + (2 * a) + (2 * p), y + a,
        x + a + (2 * p), y,
        x + a + p, y + p,
        x + a, y,
        'Z'];
};

我希望它有所帮助。