Reactjs Highcharts自定义SVG标记

我想将自定义SVG渲染为图表上的一个点，但它无法正常工作。 该点仅在悬停时可见。 我尝试了不同的代码示例，但结果总是一样的。 尝试了不同的图表类型、不同的浏览器。如果我使用本地符号，它可以正常工作

const图表：React.FunctionComponent=（）=>{
Highcharts.svgrender.prototype.symbols.cross=函数（x:any，y:any，w:any，h:any）{
返回['M'，x，y，'L'，x+w，y+h，'M'，x+w，y，'L'，x，y+h，'z']；
};
常量选项：高图表。选项={
系列：[
{
键入：“行”，
数据：[
{
x:1，
y:1,，
颜色：'黑色'，
标记：{
符号：'十字架'，
},
},
],
},
],
};
返回；
};

您需要定义

标记.lineWidth

和

标记.lineColor

来显示标记

---

演示：

谢谢，真不敢相信我错过了^^

const Chart: React.FunctionComponent = () => {
  Highcharts.SVGRenderer.prototype.symbols.cross = function (x: any, y: any, w: any, h: any) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
  };

  const options: Highcharts.Options = {
    series: [
      {
        type: 'line',
        data: [
          {
            x: 1,
            y: 1,
            color: 'black',
            marker: {
              symbol: 'cross',
            },
          },
        ],
      },
    ],
  };
  return <HighchartsReact highcharts={Highcharts} options={options} />;
};