根据切片的颜色和使用距离为标签着色

Question

我一直在研究 highcharts 饼图的演示代码，看看我是否可以完成几件事...

里面有标签，除非切片太薄。如果太薄，标签应该在外面
彩色字体为白色。如果切片在外面或者切片是具体颜色，这个应该是黑色

在下面，我能够解决我在底部函数中尝试做的一些事情。它根据切片的百分比将标签移到外面，并将其着色为黑色。但是...

我不想用attr({y:x})来调整位置切片太薄。我宁愿能够使用距离。
我不确定如何检查切片的颜色然后才能为字体着色。理想情况下它会像函数下面使用 "point" 但将用于切片。

有人知道怎么处理吗？

        $(function () {

            Highcharts.chart('container', {

                chart: {
                    type: 'pie'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            useHTML: true,
                            enabled: true,
                            format: '{point.percentage:.1f} %',
                            color: 'white',
                            distance: -40
                        },
                        showInLegend: true,
                    }
                },

                series: [{

                    data: [
                        ['Firefox', 45.0],
                        ['Chrome', 26.8],
                        ['IE 11', 12.8],
                        ['Edge', 8.5],
                        ['Opera', 6.2],
                        ['Other', 0.7],
                    ]
                }]
            },

            function(chartObj) {
                $.each(chartObj.series[0].data, function(i, point) {
                    if(point.percentage < 6) {
                        point.dataLabel.css({color: 'black'}),
                        point.dataLabel.attr({y: -20})
                    }
                })
            });

        });
    </script>

Answer 1

您的问题的解决方案是获取所需弧度（饼图切片）的角度并使用 Math.cos 和 Math.sin 函数计算 x 和 y。

const options = {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        const series = this.series[0];
        const points = series.data;
        const chart = this;

        points.forEach(function(point) {
            if (point.y <= 1) {
            const myOffset = 40;
            const {x: centerX, y: centerY} = point.graphic.attr();
            const {x, y} = point.dataLabel.attr();
            const angle = point.angle;
            point.dataLabel.attr({
              x: x + Math.cos(angle) * myOffset,
              y: y + Math.sin(angle) * myOffset
            });
            point.dataLabel.css({color: 'black'});
          }
        });
      }
    }
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -25,
        formatter: function() {
          return this.y + '%';
        }
      }
    }
  },
  series: [{
    innerSize: '60%',
    data: [40, 20, 20, 19, 1]
  }]
}

const chart = Highcharts.chart('container', options);

实例： https://jsfiddle.net/b1ya1x9h/

根据切片的颜色和使用距离为标签着色

Coloring a label depending on color of slice and using distance

highcharts

pie-chart