Question

我一直在搞乱高图饼图的演示代码，看看我能不能完成几件事......

除非切片太薄，否则请在里面贴标签。如果它太薄，标签应该在
颜色字体为白色。如果切片在外面或切片是a 特定颜色，这应该是黑色

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

我不想使用attr（{y：x}）来调整位置切片太薄了。我宁愿能够使用距离。
我不确定如何检查切片的颜色，然后才能为字体着色。理想情况下它会像函数一样下面使用＆＃34; point＆＃34;但是会改为切片。

任何人都知道如何处理？

public static <T> List<T> append(List<T> list, T... args){
    return Stream.concat(list.stream(), Stream.of(args))
            .collect(Collectors.toList());
}

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/

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

1 个答案: