如何使用Highcharts在饼图上绘制箭头?

By simon at 2018-02-28 • 0人收藏 • 60人看过

[![enter image description 这里](https://i.stack.imgur.com/obq1w.png)(https://i.stack.imgur.com/obq1w.png)

我正在使用一个饼图高图的哈特和一些设置是: -

 pie: {
          borderColor: '#000000',
          innerSize: '60%'
 },
 series: [{
          data: [
          ['projected Income', 44.2],
          ['Discount', 26.6],
          ['Annual Loss', 20]
     ]}]
 }
现在我的要求是在年度损失图上显示箭头显示在蓝色的图片中。有没有可能在饼图中实现这一点 Highcharts的?我看过很多例子,但是those解释为Line- 图表。

1 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

对于线/散射/酒吧,你可以使用 [注释](https://www.highcharts.com/docs/advanced-chart-features / annotations-module)b它们不适用于饼图/甜甜圈图表。 所以使用[SVGRenderer](https://api.highcharts.com/class- 参考/ Highcharts.SVGRenderer.html),你可以添加额外的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/

登录后方可回帖

Loading...