Question

我的目标是在两端绘制一条带箭头的曲线。我正在尝试在此图形的底部重新创建弯曲的虚线/箭头。

https://www.epa.gov/sites/production/files/2019-07/active_cases_under_review-7_1_19-boxes.png

到目前为止，我的曲线（最初是弧线）需要更小。

我对属性和CSS进行了各种大小调整，但没有任何效果。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

var renderer;

renderer = new Highcharts.Renderer(
    $('#container')[0],
    400,
    300
);

renderer.arc(200, 150, -100, -100, -Math.PI, 0)
.attr({
    stroke: '#D3D3D3',
    'stroke-width': 2,
    dashstyle: 'dash'
        })
.add();

Answer 1

要创建两端带有箭头的曲线，最好使用renderer.path和renderer.symbol('triangle')的组合。我用水平箭头为您创建了一个示例，对其进行测试并根据需要更改其工作方式。

var arrWidth = 14,
	arrHeight = 25,
  startX = 80,
  startY = 200,
  endX = 200,
  endY = 100,
  renderer;

renderer = new Highcharts.Renderer(
  $('#container')[0],
  800,
  800
);

renderer.symbol('triangle', startX - arrWidth/2, startY - arrHeight, arrWidth, arrHeight)
.attr({
  fill: '#D3D3D3',
  rotation: -90,
  rotationOriginX: startX,
  rotationOriginY: startY
}).add();

renderer.symbol('triangle', endX - arrWidth/2, endY - arrHeight, arrWidth, arrHeight)
.attr({
  fill: '#D3D3D3',
  rotation: 90,
  rotationOriginX: endX,
  rotationOriginY: endY
}).add();

renderer.path([
	'M',
  startX,
  startY,
  'C',
  (startX + endX) / 2,
  startY,
  (startX + endX) / 2,
  endY,
  endX,
  endY
]).attr({
	stroke: '#D3D3D3',
  'stroke-width': 2,
  dashstyle: 'dash'
}).add();

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

演示：

https://jsfiddle.net/BlackLabel/prz5w9ox/1/

API参考：

如何在图表中调整Arc的大小？

1 个答案: