Question

我希望将“材料UI”图标呈现为标记。找不到任何清晰的文档该如何实现？

Answer 1

恐怕在当前的实现方式中，标记可能会更改为 graphic.url 或自定义SVG符号，同时，Material UI会以您想要的方式使用，共享一个将字体更改为所需符号的功能。

API：https://api.highcharts.com/highcharts/series.line.marker.symbol

我知道Material UI也共享一个SVG图标，但是要在Highcharts中进行自定义并不容易。看一下以下示例：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/，看看十字架的呈现方式：

return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];

其中x和y是点坐标-为每个点呈现不同的路径值。

这是我尝试使用此example中的materialUI SVGIcon：

演示：https://jsfiddle.net/BlackLabel/j2Lq4kgp/

我在materialUI API中定义了该符号，然后使用此函数对其进行了定位：

events: {
    render(){ 
      let chart = this;
                
      chart.series[0].points.forEach(p => {
      console.log(p.graphic)
        p.graphic.translate(p.plotX - chart.marginRight - 2, p.plotY - p.graphic.getBBox().height + 2)
      })
      
    }
  }

但是，老实说，我不确定这种方法...

我认为您应该考虑使用fontAwasome。 Highcharts允许使用自定义模式来使用它们，请参阅：http://jsfiddle.net/highcharts/2A7Zf/

在Highcharts中将材质UI图标渲染为标记

1 个答案: