Использование функции адаптера для добавления изображений пользовательских маркеров Dynami c к легенде в AMCharts - PullRequest
Новая
       10

Использование функции адаптера для добавления изображений пользовательских маркеров Dynami c к легенде в AMCharts

0 голосов
/ 08 января 2020

Я использую AMCharts4 для создания этой диаграммы в React.

макет диаграммы, которую я хочу сделать

Я хочу полностью настроить легенду для отображения флага изображения стран вместо стандартных цветных маркеров. Я думаю, что могу добиться этого с помощью адаптера для возврата html. Я использую flag-icon- css для генерации изображений флагов, поэтому я хочу сделать что-то вроде этого: 

 flag.adapter.add('href', function(href: any, target: any) {
          return <span className={target.dataItem.dataContext.dummyData.flag}></span>;
        });
      });

Я очень полагаюсь на этот пример из документов: https://codepen.io/team/amcharts/pen/VqQvxX Я не могу понять, что добавить в качестве первого аргумента функции адаптера. Они используют 'href', но я действительно хочу использовать что-то вроде 'html', которое, я думаю, не существует, и в настоящее время выдает мне ошибку: 'Тип' Элемент 'не может быть назначен типу' string '', когда я пытаюсь чтобы вернуть это из функции адаптера.

В настоящее время я пытаюсь динамически присвоить некоторым сериям dummyData, когда они создаются, который берет iso-код страны и помещает его в имя класса, которое принимает пакет flag-icon. Например: 

            newSeries.dummyData = {
          flag: `flag-icon flag-icon-${ownershipItem.isoCode.toLowerCase()}`
        };

Кто-нибудь знает, возможно ли вернуть html / jsx из функции адаптера с amcharts? и если нет, есть ли другой способ достижения этой пользовательской легенды? Любая помощь приветствуется. Я опубликую более подробный код ниже. 

useEffect(
function() {
  if (topOwnershipMounted && CompanyTopOwnership) {
    topOwnershipChart.current = (() => {
      am4core.useTheme(am4themes_kelly);
      const newChart = am4core.create('topOwnershipChart', am4charts.XYChart);
      newChart.data = CompanyTopOwnership;
      newChart.dateFormatter.dateFormat = 'yyyy';
      newChart.minHeight = 300;

      // Declare Axes
      let countryAxis = newChart.yAxes.push(new am4charts.ValueAxis());
      countryAxis.title.text = 'Percentage';
      let yearAxis = newChart.xAxes.push(new am4charts.DateAxis());
      yearAxis.title.text = 'Year';

      newChart.legend = new am4charts.Legend();
      let marker = newChart.legend.markers.template;
      marker.disposeChildren();

      //create line series
      CompanyTopOwnership.companyTopOwnerShips.map((ownershipItem: any) => {
        let newSeries = newChart.series.push(new am4charts.LineSeries());
        newSeries.name = ownershipItem.countryName;
        const newSeriesData = ownershipItem.ownerShipPercentageDates.map((percentItem: any) => {
          return percentItem;
        });

        //assign data for flags
        newSeries.dummyData = {
          flag: `flag-icon flag-icon-${ownershipItem.isoCode.toLowerCase()}`
        };

        // Add custom image instead
        let flag = marker.createChild(am4core.Image);

        // use adapter to try and return custom html instead of marker
        flag.adapter.add('path', function(path: any, target: any) {
          // return <FlagIcon className='legendFlag' code='us' />;
          return <span className={target.dataItem.dataContext.dummyData.flag}></span>;
        });

        newSeries.data = orderBy(
          newSeriesData,
          ({ year }) => {
            return moment(year).format('YYYY');
          },
          ['asc']
        );

        newSeries.dataFields.dateX = 'year';
        newSeries.dataFields.valueY = 'percentage';
        newSeries.strokeWidth = 3;
        newSeries.tensionX = 0.7;
        newSeries.bullets.push(new am4charts.CircleBullet());
      });

      return newChart;
    })();
  }
},
// eslint-disable-next-line
[CompanyTopOwnership, getCompanyData, topOwnershipMounted]

);

...