Question

我一直在努力实施动态的标注＆＃39;使用Highcharts javascript库形成圆环图的数据标签，其中数据标签的缺口指向相应的弧。像这样：https://imgur.com/yKhWKOu

我已经创建了＆＃39;标注＆＃39;使用highcharts渲染器方法的形状，但无法使其动态化。这就是我现在所得到的：https://imgur.com/VMuVwdk 我的代码是：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>


  <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
  (function(Highcharts) {
    Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h) {
      var arrowLength = 6,
        halfDistance = 6,
        r = Math.min(0, w, h),
        safeDistance = r + halfDistance,
        <!-- anchorX = options && options.anchorX,
        //anchorY = options && options.anchorY, 
        path;
      path = [
        'M', x + r, y,      // 
        'L', x + w - r, y, // top side  
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner  
        'L', x + w, y + h - r, // right side 
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner 
        'L', x + r, y + h, // bottom side 
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner 
        'L', x, y + r, // left side 
        'C', x, y, x, y, x + r, y // top-right corner
      ];
      path.splice(23, 
        3,
        'L',
        w / 2 + halfDistance,
        y + h,
        w / 2, 
        y + h + arrowLength,
        w / 2 - halfDistance, 
        y + h,
        x + r, 
        y + h
      );
      return path;
    };
  }(Highcharts));

  Highcharts.chart('container', {
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: 'white'
          },
          connectorWidth: 0,
          distance: 10, 
          shape: 'callout',
          backgroundColor: 'red',
          <!-- backgroundColor: 'rgba(0, 0, 0, 0.75)', -->
          style: {
            color: '#FFFFFF',
            textOutline: 'none'
          }
        },
        startAngle: 0,
        endAngle: 360,
        center: ['50%', '50%']
      }
    },
    series: [{
      type: 'pie',
      innerSize: '80%',
      data: [
        ['Firefox', 10.38],
        ['IE', 56.33],
        ['Chrome', 24.03],
        ['Opera', 31.44]
      ]
    }]
  }, function(chart) {

  });
  </script>
  </body>

  </html>

＆＃39;提前致谢＆＃39;

Answer 1

我检查了这个主题，看起来在Highcharts中做起来相当棘手。

该库使用SVGRenderer.label（https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label）函数来创建数据标签。

Chevron（小箭头）仅在callout和xAnchor被定义时才会显示在yAnchor形状标签中，并且Highcharts.Renderer.prototype.symbols.callout函数的必要条件得到满足{{3} }）。为饼图系列生成数据标签时，这些值未定义 - 不会出现雪佛龙。

您已覆盖此功能并硬编码标签路径 - 当您希望它具有响应时，这不是解决方案。

我找到了解决方法：

我将dataLabels.format设置为空字符串 - 生成标签，但它们不可见，因为它们没有内容。我在chart.events.render中使用他们的位置来生成新标签：

  render: function() {
    var chart = this,
      series = chart.series[0],
      renderer = chart.renderer;

    series.points.forEach(function(p) {
      var dl = p.dataLabel,
        x = dl.x + chart.plotLeft,
        y = dl.y + chart.plotTop,
        chartCenterX = chart.chartWidth / 2,
        chartCenterY = chart.chartHeight / 2,
        anchorX,
        anchorY;

      // destroy the old label
      if (dl.customLabel) {
        dl.customLabel.destroy();
      }

      // definitions for all the directions
      if (x < chartCenterX && y < chartCenterY) { // right bottom corner chevron
        anchorX = x + 30;
        anchorY = y + 50;
      } // more should be added here

      // create custom label
      dl.customLabel = renderer.label(p.name, x, y, 'callout', anchorX, anchorY).attr({
        fill: 'blue'
      }).css({
        color: 'white'
      }).add();

    });
  }

现场演示： https://github.com/highcharts/highcharts/blob/master/js/parts/SvgRenderer.js

这里最大的挑战是为锚点找到合适的坐标。我只为绘图区域左上角的标签做了这个（这只是为了示例目的 - 需要找到更好的公式）。我使用图表的尺寸来计算这些值。

这不是一个非常优雅的解决方案，但是如果你找到合适的公式并做一些编码就行了。

Highcharts数据标签＆＃39;标注＆＃39;形状不适合圆环图

1 个答案: