Как динамически создавать временную диаграмму при нажатии на диаграмму x-диапазона в highcharts angular

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

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

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

Ниже ссылка на stackblitz

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

Достигаемый дизайн диаграммы (https://i.stack.imgur.com/PmPn4.jpg< /а>)

Обратитесь к этому изображению: https://i.stack.imgur.com/Cju0A.jpg


angular dynamic highcharts timeline xrange
person user555    schedule 12.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Функция для отображения новой серии:

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

person Sebastian Wędzel    schedule 14.04.2020
comment
1. как добавить здесь пользовательские кнопки для каждой категории, чтобы он также раскрывался при нажатии кнопки. - person user555; 16.04.2020
comment
2. Если для каждой категории существует более одной задачи, то несколько точек (ромб одной задачи с квадратом другой задачи с такими же данными), а затем как показать другой цвет на диаграмме x-диапазона в этой точке - person user555; 16.04.2020
comment
3. Как скрыть определенную точку (ромб, квадрат...) при щелчке метки для определенной точки, как показано на рисунке. - person user555; 16.04.2020
comment
2. Я не понимаю. Не могли бы вы показать это в каком-нибудь демо? - person Sebastian Wędzel; 16.04.2020
comment
3. Я изменил логику, и теперь вместо баллов добавляются серии: jsfiddle.net/BlackLabel/er32xLzn - person Sebastian Wędzel; 16.04.2020
comment
1. Для 1-й точки я хочу добавить кнопку для каждой категории, и при нажатии на нее я могу разворачиваться и сворачиваться. Вы можете проверить изображение PNG, которое я прикрепил. Я должен добавить значок стрелки также для кнопки «Развернуть свернуть». - person user555; 17.04.2020
comment
3. 3-й пункт, также существует одна проблема, заключающаяся в том, что при расширении более чем одной диаграммы, а затем сворачивании одной, обе серии сворачиваются, и отображается только метка оси Y. - person user555; 17.04.2020
comment
4. Для 2-го пункта, который вы не поняли, я добавил одно изображение «Ссылка на это изображение» под моим вопросом. На этом изображении показано, что если есть много задач и если они имеют какую-то общую точку на оси x, то на графике x-range отобразите немного более темный цвет, чтобы понять, что некоторые точки задач одинаковы. - person user555; 17.04.2020
comment
2. По 3му пункту возможно ли что метки будут всегда, а только серии будут добавляться динамически. а затем при щелчке по определенной метке точка отключается и включается. И я должен строить линии также между точками, как вы можете ссылаться на изображение - person user555; 17.04.2020
comment
1. В демо-версии я показал, как инициировать событие клика по точке вручную. Теперь вам нужно добавить кнопку, которая будет это делать. Вот API, как добавить пользовательскую кнопку в Highcharts: api.highcharts.com/ ссылка на класс/ - person Sebastian Wędzel; 17.04.2020
comment
2. Метки легенды показывают, когда серия была добавлена. Если вы хотите, чтобы это было так, как вы описываете, вам нужно будет отобразить пользовательскую точку, которая будет добавлена ​​​​по серии кликов. - person Sebastian Wędzel; 17.04.2020
comment
3. Вы правы, исправлено здесь: jsfiddle.net/BlackLabel/5x4wnr9v - person Sebastian Wędzel; 17.04.2020
comment
4. Я думаю, что вы можете добиться этого, добавив дополнительную точку, которая закроет эту часть, как здесь с синим цветом: jsfiddle.net/BlackLabel/0ugetqcL - person Sebastian Wędzel; 17.04.2020
comment
1. для добавления кнопок перед каждой категорией, как получить позицию категории x и y и добавить перед каждой категорией. а также как добавить значки сюда внутри кнопки - person user555; 18.04.2020
comment
2. Проблема расширения свертывания все еще существует, когда вы расширяете обе серии, а затем сначала сворачиваете первую серию, а затем сворачиваете вторую серию, затем точки по-прежнему отображаются для 2-й серии, только метка y скрывается - person user555; 18.04.2020
comment
1. Вы должны задать его как отдельный вопрос, чтобы избежать путаницы. 2. Протестируйте, надеюсь, я исправил: jsfiddle.net/BlackLabel/ecgthpm5 3. Как я уже сказал, легенда добавляется при добавлении серии. В соответствии с вашими требованиями вам нужно будет создать пользовательскую легенду очков. На SO вы можете найти множество примеров того, как создать пользовательскую легенду Highcharts. - person Sebastian Wędzel; 20.04.2020