Как я могу изменить размер Arc в старших чартах? - PullRequest
Новая
       12

Как я могу изменить размер Arc в старших чартах?

0 голосов
/ 09 июля 2019

Моя цель - нарисовать изогнутую линию со стрелками на обоих концах. Я пытаюсь воссоздать изогнутую пунктирную линию / стрелки внизу этого рисунка.

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();

1 Ответ

0 голосов
/ 10 июля 2019

Для создания изогнутой линии со стрелками на обоих концах будет лучше использовать комбинацию 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>

Демо:

Ссылка API:

...