Javascript 使用适配器功能将动态自定义标记图像添加到AMCharts中的图例

我正在使用AMCharts4在React中创建此图表

我想完全自定义图例，以显示国家的国旗图像，而不是默认的颜色项目符号。我想我可以通过使用适配器返回html来实现这一点。我正在使用标志图标css生成标志图像，因此我想做如下操作：

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

有人知道这是否可以通过amcharts从适配器函数返回html/jsx吗？如果没有，还有其他方法来实现这个定制传奇吗？感谢您的帮助。我将在下面发布一些更详细的代码

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]

useffect(
函数（）{
if（业主装船和公司装船）{
topOwnershipChart.current=（（）=>{
am4core.useTheme（am4themes_kelly）；
const newChart=am4core.create（'topOwnershipChart'，am4charts.XYChart）；
newChart.data=公司权力；
newChart.dateFormatter.dateFormat='yyyy'；
newChart.minHeight=300；
//申报轴线
让countryAxis=newChart.yAxes.push（new am4charts.ValueAxis（））；
countryAxis.title.text='Percentage'；
让yearAxis=newChart.xAxes.push（new am4charts.DateAxis（））；
yearAxis.title.text='Year'；
newChart.legend=新的am4charts.legend（）；
让marker=newChart.legend.markers.template；
marker.disposeChildren（）；
//创建线系列
CompanyPownership.CompanyPownerships.map（（所有者项目：any）=>{
让newSeries=newChart.series.push（new am4charts.LineSeries（））；
newSeries.name=ownershipItem.countryName；
const newSeriesData=ownershipItem.ownerShipPercentageDates.map（（百分比项：任意）=>{
退货项目；
});
//为标志分配数据
newSeries.dummyData={
flag:`flag icon flag icon-${ownershipItem.isoCode.toLowerCase（）}`
};
//改为添加自定义图像
let flag=marker.createChild（am4core.Image）；
//使用适配器尝试返回自定义html而不是标记
flag.adapter.add（'path'，函数（路径：任意，目标：任意）{
//返回；
返回；
});
newSeries.data=orderBy(
新闻界，
（{year}）=>{
返回时刻（年）。格式（'YYYY'）；
},
['asc']
);
newSeries.dataFields.dateX='year'；
newSeries.dataFields.valueY='percentage'；
newSeries.strokeWidth=3；
newSeries.tensionX=0.7；
newSeries.bullets.push（新am4charts.CircleBullet（））；
});
返回新图表；
})();
}
},
//eslint禁用下一行
[公司电源，获取公司数据，拓扑所有者安装]

---

))

不能在AmCharts适配器中使用jsx/组件名称

href

需要一个指向图像的字符串URL，

path

引用一个字符串，这解释了您遇到的错误。请注意，适配器对应于与对象关联的实际属性，因此返回值类型必须与基础属性匹配。有关适配器的更多信息。提到自定义标记，感谢@xorspark的回复。你知道我如何使用图像的本地路径而不是jsx吗？这可能会涉及一些网页配置（或者你正在使用的任何东西），以便可以从捆绑的JS中引用图像，但我不是这些工具的专家。

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]