如何使用Highcharts中的自定义样式更改标记符号和dataLabel [英] How to Change marker symbol and dataLabel with custom style in Highcharts

问题描述

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

解决方案

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

Fork小提琴探索它

 系列：[{
 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，
符号：'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，
}，
标记：{
 radius：10，
符号：'url（https://www.highcharts.com/samples/graphics/snow.png）'，
} 
} ]，
}]，
  

编辑

根据新要求

 系列：[{
 data：[ 
 events：{
 mouseOver：function（e）{
 events：{
 mouseOver：function（e）{
 events：{
 { 
 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，
符号：'url（https://www.highcharts.com/samples/graphics/sun.png）'，
} 
 
}）; 
} 
} 
} 
}，{
数据：[216.4,194.1,95.6,54.4,29.9,71.5,106.4,129.2,144.0,176.0,135.6 ，148.5]，
点：{
 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，
符号：'url（https://www.highcharts.com/samples/graphics/snow.png）'，
} 
 
}）; 
 
 
 
}]，
  

小提琴链接

更新
小提琴链接

How can we customize dataLables and marker symbol on hover? Please refer to the following image:

解决方案

Add symbols as image (url link) inside markers to the last data in the series

Fork Fiddle explore it

    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)',
    }
    }],
}],

Edit

According to new requirement

        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

Update Fiddle link

这篇关于如何使用Highcharts中的自定义样式更改标记符号和dataLabel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！