highcharts - 如何使用 Highcharts 在饼图上绘制箭头？

Question

I am using a pie-chart of highchart and some settings are:-

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

Now my requirement is to show the arrow on the Annual loss graph as shown in picture of blue colour. Is it possible to implement this in pie chart of Highcharts? I have seen many examples but those are explained for Line-Charts.

Answer 1

对于折线图/散点图/条形图，您可以使用 annotations但它们不适用于饼图/圆环图。

所以使用 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/