Как динамически создать график временной шкалы при щелчке диаграммы x-range в старших графиках angular - PullRequest
Новая
       43

Как динамически создать график временной шкалы при щелчке диаграммы x-range в старших графиках angular

0 голосов
/ 12 апреля 2020

[введите описание изображения здесь] [1] Я хочу добиться дизайна, приведенного на рисунке ниже. Здесь я должен показать задачу и связанные с ней действия в другое время. Основная задача отображается как тип диаграммы x-range, и когда мы нажимаем на конкретную полосу x-range или раскрываем кнопку свертывания помимо категорий, она должна динамически генерировать график временной шкалы активностей с символами, показывающими, в какие даты выполняются действия для основной задачи. и на нем должен отображаться другой символ для разных типов активностей, например, на какую дату активируется действие, запланировано или срок выполнения.

И еще одна вещь, которую я должен показать другим цветом на панели x-range, где одна или несколько активностей внутри основной задачи находятся в одну и ту же дату. Кроме того, символы на временной шкале могут перекрываться, поскольку сработавшие и запланированные даты могут быть одинаковыми для некоторых видов деятельности.

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

Ниже приведена ссылка для стекаблиц

https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html

Диаграмма, которую необходимо выполнить (https://i.stack.imgur.com/PmPn4.jpg)

См. Это изображение: https://i.stack.imgur.com/Cju0A.jpg

1 Ответ

0 голосов
/ 14 апреля 2020

Я сделал пример с 2 пользовательскими функциями. Первый добавляет разыскиваемый ряд в виде свернутого к основному, а второй разрушает его.

Функция показа нового ряда: 

function showTasks(newSeries, point) {
  var series = point.series,
    chart = series.chart,
    newYCat = [...chart.yAxis[0].categories];

  // Set points to higher y to make a space for collapsed points
  chart.series.forEach(s => {
    s.points.forEach(p => {
      if (p.y > point.y) {
        p.update({
          y: p.y + 1
        }, false, false)
      }
    })
  })
  // Add collapsed series
  chart.addSeries(newSeries);
  // Set point flag
  point.clicked = true;
  // Add the series name to the yAxis cat array
  newYCat.splice(newSeries.yPos, 0, newSeries.name);
  // Update the yAxis 
  chart.yAxis[0].update({
    categories: newYCat,
  })
}

Я думаю, что здесь все прояснено - Я оставил инструкцию в комментарии, что происходит.

API для используемых опций:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Axis#update

Функция сокрытия делает обратное.

Функции запускаются в обратном вызове point.events.click , где должен быть определен свернутый ряд до этой точки.

Демо: https://jsfiddle.net/BlackLabel/cftod6q4/

API: https://api.highcharts.com/highcharts/series.line.events.click

...