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

Question

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

Answer 1

里面添加标记符号图像（网址链接），最后的数据系列中的

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