Отображение значков пользовательского интерфейса материала в качестве маркера в Highcharts - PullRequest
Новая
       5

Отображение значков пользовательского интерфейса материала в качестве маркера в Highcharts

0 голосов
/ 07 февраля 2020

Я хочу отображать значки материалов пользовательского интерфейса в качестве маркеров. Не можете найти какой-либо четкой документации, как этого можно достичь?

1 Ответ

0 голосов
/ 07 февраля 2020

Боюсь, что в текущей реализации маркер может быть изменен на graphi c .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 - координаты точки - которые представляют разные значения пути для каждой точки ,

Вот моя попытка использовать материалUI SVGIcon из этого примера :

Демо: https://jsfiddle.net/BlackLabel/j2Lq4kgp/

Я определил этот символ в API-интерфейсе materialUI, а затем позиционировал его с помощью этой функции: 

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/

...