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

我们如何在hover时自定义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(http://sofzh.miximages.com/javascript/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(http://sofzh.miximages.com/javascript/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(http://sofzh.miximages.com/javascript/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(http://sofzh.miximages.com/javascript/snow.png)', } }); } } } }], 

小提琴链接

更新 小提琴链接