Нарисуйте динамический c прямоугольник на основе координат даты - PullRequest
Новая
       49

Нарисуйте динамический c прямоугольник на основе координат даты

0 голосов
/ 05 августа 2020

Мне нужно нарисовать динамические c прямоугольники на основе координат даты . Чтобы извлечь ось x и y, мне нужно сделать это с даты.

Итак, я пробовал 3 способа

  1. chart.addPlotBand () this Функция заключается в рисовании динамических c полос графика. Проблема в том, что он будет отображаться либо по оси x, либо по оси y 1-й подход . Вторая проблема здесь, я не могу нарисовать две полосы графика с динамической c шириной и координатами.

  2. Этот подход я пробовал с помощью chart.renderer, хотя он все еще работает. некоторые проблемы, такие как мне нужно найти способ передать динамическую c ширину, ось X и ось Y. Другая проблема - необходимо преобразовать координаты даты в координаты x и y. Наконец, полоса не расширяется, когда мы расширяем экран браузера. 2-й подход 

    chart.renderer.rect(60, 40, 280, 50, 1)
   .attr({
     fill: '#FCFFC5',
      zIndex: 3,
      text: 'adasd'
  }).add();

chart.renderer.label('Eco', 60, 40)
  .css({
   fontSize: '15pt',
   textAlign: 'center'
 })
    .attr({
       zIndex: 4,

     }).add();

chart.renderer.rect(330, 40, 280, 50, 1)
 .attr({
   fill: '#04f9fe',
   zIndex: 3,

  }).add();

  3. Я пробовал использовать многоугольник, но проблема в том, что у меня нет координат x и y. Мне нужно извлечь из даты. Также не уверен, будет ли 3-й подход работать с форматами даты

Это основная скрипка , где я точно хочу нарисовать прямоугольник на основе упомянутые вещи

1) У меня есть координаты даты, которые нужно преобразовать по оси x и y.

2) Если у нас есть только первый прямоугольник, он должен динамически изменяться c занять все место в шапке

1 Ответ

2 голосов
/ 05 августа 2020

Думаю, что второй подход лучший. Ниже приведены мои рекомендации, как сделать его адаптивным и с использованием формата времени данных.

Демо: http://jsfiddle.net/BlackLabel/vfg51cey/

  if (chart.rectOne) {
    chart.rectOne.destroy();
  }

Проверка наличия настраиваемого прямоугольного элемента после каждого рендеринга сохраняет отзывчивость рендеринга.

API: https://api.highcharts.com/highcharts/chart.events.render

...