如何在Highcharts中使用自定义样式更改标记符号和dataLabel

Question

我们如何在悬停时自定义dataLable和标记符号？请参考下图：

Answer 1

在标记内添加符号作为图像（url链接）到系列中的最后一个数据

Fork Fiddle探索它

    series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,{
        y: 26.5,
        dataLabels: {
                    enabled: true,
                },
        marker: {
        radius: 10,
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
    }
    }],
}, {
  data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,{
        y: 103.9,
        dataLabels: {
                    enabled: true,
                },
        marker: {
        radius: 10,
        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)',
    }
    }],
}],

修改

根据新要求

        series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
         point: {
      events: {
        mouseOver: function(e) {
          this.series.data.forEach(p => {
            p.update({
              dataLabels: {
                enabled: false
              },
              marker: {
              radius: 10,
              symbol: 'circle',
          }
            }, false, false)
          });

          this.update({
            dataLabels: {
              enabled: true
            },
             marker: {
            radius: 10,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
            }

          });
        }
      }
    }
}, {
  data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
   point: {
      events: {
        mouseOver: function(e) {
          this.series.data.forEach(p => {
            p.update({
              dataLabels: {
                enabled: false
              },
              marker: {
              radius: 10,
              symbol: 'circle',
          }
            }, false, false)
          });

          this.update({
            dataLabels: {
              enabled: true
            },
             marker: {
            radius: 10,
            symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)',
            }

          });
        }
      }
    }
}],

Fiddle link

<强>更新 Fiddle link