Question

我有一个极坐标图，我想在标签上使用小图标。使用的图标取决于数据。因此，我在系列数据中添加了带图标的网址，但无法在xAxis中使用它。

xAxis: {
   labels: {
    formatter: function() {
        return '<image src='+this.point.icon+'/>';
  },
    useHTML: true
}
    },

yAxis: {
    max: 7,
    tickInterval : 1

},

 plotOptions: {
    column: {
        pointPadding: 0,
        groupPadding: 0
    },
    series: {
       stacking : "normal"
    }
},


series: [{
  name : 'Serie A',
  color : "#76DFE4",
  data : [
    {name : "Data 1", y : 3, icon : "https://via.placeholder.com/15" },
    {name : "Data 2", y : 3, icon : "https://via.placeholder.com/15" },
    {name : "Data 3", y : 2, icon : "https://via.placeholder.com/15" }
  ],


},{
  name: 'Serie B',
  color : "#37C0F7",
  data: [
{name : "Data 1", y : 1, icon : "https://via.placeholder.com/15" },
    {name : "Data 2", y : 2, icon : "https://via.placeholder.com/15" },
    {name : "Data 3", y : 3, icon : "https://via.placeholder.com/15" }

  ]

请在此处查看JSFiddle：https://jsfiddle.net/gpn6mLah/9/

谢谢

Answer 1

您可以通过以下方式引用icon属性：

xAxis: {
    labels: {
        formatter: function() {
            var point = this.chart.series[0].userOptions.data[this.pos];
            if (point) {
                return '<image src=' + point.icon + '/>';
            }
        },
        ...
    }
}

实时演示： https://jsfiddle.net/BlackLabel/vdqk45no/

如何根据数据使用标签上的图像？

1 个答案: