javascript - Highcharts 。 mouseOver 圆环图内的动态标签

Question

所以这就是我想要完成的:
Example

我需要的是:

圆环图内的标签在鼠标悬停时发生变化

颜色取决于数据

样式标签看起来像图片

我实际上设法将鼠标悬停，但我无法根据数据更改颜色并将其放在中间

这是一个 fiddle : https://jsfiddle.net/9cjxb97a/1/

这是我到目前为止编写的代码:

    Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: ''
  },
  exporting: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  colors: ['red', 'blue', 'green'],
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    },
    series: {
      point: {
        events: {
          mouseOver: function() {
            var chart = this.series.chart;
            if (!chart.lbl) {
              chart.lbl = chart.renderer.label('')
                .attr({
                  padding: 10,
                })
                .css({
                  color: 'red',
                })
                .add();
            }
            chart.lbl
              .show()
              .attr({
                text: this.y + '%'
              });
          }
        }
      },

    },
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,

    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2
    }],
    innerSize: '80%'
  }],

});

谢谢

Answer 1

这是您在圆圈之间显示值的代码。

 Highcharts.chart('container', {
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: ''
},
exporting:{
enabled:false
},
tooltip: {
    enabled:false
},
   colors:['red', 'blue', 'green'],
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: false,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        }
    },
     series: {
    point: {
        events: {
            mouseOver: function () {
                var chart = this.series.chart;
                if (!chart.lbl) {
                    chart.lbl = chart.renderer.label('')
                        .attr({
                            padding: 10,
                        })
                        .css({
                            color: 'red',
                        })
                        .add();
                }
                chart.lbl
                    .show()
                    .attr({
                        text: this.y + '%'
                    });
            }
        }
    },

},
},
 tooltip: {
          borderWidth: 0,
          backgroundColor: 'none',
          headerFormat: '',
          shadow: false,
          style: {
              fontSize: '16px'
          },
          pointFormat: '<span style="font-size:40px;color:black; font-weight: bold">{point.y}%</span><br><span>50 Kg</span>{point.custom.customParam}',
          positioner: function (labelWidth) {
              return {
                  x: (this.chart.chartWidth - labelWidth) / 2,
                  y: this.chart.plotHeight/2
              };
          }
      },
series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
    }, {
        name: 'Chrome',
        y: 24.03,

    }, {
        name: 'Firefox',
        y: 10.38
    }, {
        name: 'Safari',
        y: 4.77
    }, {
        name: 'Opera',
        y: 0.91
    }, {
        name: 'Proprietary or Undetectable',
        y: 0.2
    }],
    innerSize:'80%'
}],

});