如何用Highcharts在饼图中绘制箭头？

Question

我正在使用highchart的饼图，并且一些设置是：

 pie: {
          borderColor: '#000000',
          innerSize: '60%'
 },
 series: [{
          data: [
          ['projected Income', 44.2],
          ['Discount', 26.6],
          ['Annual Loss', 20]
     ]}]
 }

现在，我的要求是在年度亏损图上显示箭头，如蓝色图片所示。可以在Highcharts的饼图中实现此功能吗？我已经看到了许多示例，但这些示例已针对线图进行了说明。

Answer 1

对于折线/散点图/条形图，可以使用批注，但不适用于饼图/圆环图。

因此，使用SVGRenderer可以向饼图/圆环图中添加额外的SVG元素。

在下面的示例中，我使用SVG标记作为箭头画了一条线：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: "My Title"
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
  },
  plotOptions: {
    pie: {
      borderColor: '#000000',
      innerSize: '60%',
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false,
        format: '<b>{point.name}</b>: {point.y:.1f}',
      }
    }
  },
  series: [{
    data: [
      ['projected Income', 44.2],
      ['Discount', 26.6],
      ['Annual Loss', 20]
    ]
  }]
}, function(chart) {
  var point = chart.series[0].data[2];
  var dx = chart.plotBox.x,
    dy = chart.plotBox.y;
  var radius = point.shapeArgs.r;
  var angle = (point.shapeArgs.start + point.shapeArgs.end) / 2,
    x = (radius * .9 * Math.cos(angle)) + point.shapeArgs.x,
    y = (radius * .9 * Math.sin(angle)) + point.shapeArgs.y;
  var x2 = (radius * 1.5 * Math.cos(angle)) + point.shapeArgs.x,
    y2 = (radius * 1.5 * Math.sin(angle)) + point.shapeArgs.y;

  var text = chart.renderer.text(
      'Annual Loss',
      x2 + dx, y2 + dy
    ).attr({
      zIndex: 5
    }).add(),
    box = text.getBBox();
  text.attr({
    dx: -box.width / 2
  });

  chart.renderer.rect(box.x - 5 - box.width / 2, box.y - 5, box.width + 10, box.height + 10, 5).attr({
    fill: '#FFFFEF',
    'stroke': 'red',
    'stroke-width': 1,
    zIndex: 4
  }).add();

  console.log(point, chart);

  chart.renderer.path({
    'stroke': '#ff0000',
    'stroke-width': 3,
    'marker-end': "url(#markerArrow2)",
    zIndex: 3,
    'd': ['M', x2 + dx, y2 + dy, 'L', x + dx, y + dy]
  }).add();

});

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

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

<svg style="height: 0">
  <defs>
     <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2 Z" style="fill: red;" />    
    </marker> 
    
     <marker id="markerArrow2" markerWidth="10" markerHeight="10" refX="6" refY="6"
           orient="auto">
        <path d="M2,2 L10,6 L2,10 L6,6 L2,2 Z" style="fill: red;" />    
    </marker> 
  </defs>
</svg>

这是jsFiddle的链接：https ://jsfiddle.net/beaver71/k091v22e/