Highcharts Gantt избегать дублирующих задач

Question

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

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

    var today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();


// THE CHART
Highcharts.ganttChart('container', {
    chart: {
    events: {
        load: function() {
        var chart = this,
        series = chart.series[0];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -50);
        });

        series = chart.series[1];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -50);
       });

        series = chart.series[2];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -50);
       });
}
    }
  },
  title: {
    text: 'Grouping tasks vertically'
  },
  yAxis: {
    categories: ['Resource 1', 'Resource 2', 'Resource 3'],
    breaks: [{
        breakSize: 1,
      from: 0,
      to: 0
    },{
        breakSize: 1,
      from: 1,
      to: 1
    },{
        breakSize: 1,
      from: 2,
      to: 2
    }]
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Resource 1',
    data: [{
      name: 'Task A',
      y: 0,
      start: today - (2 * day),
      end: today + (6 * day)
    }, {
      name: 'Task B',
      y: 0.5,
      start: today - (1 * day),
      end: today + (6 * day),
      color: 'rgba(140, 140, 140, 0.7)'
    }, {
      name: 'Task C',
      y: 0.99,
      start: today + (1 * day),
      end: today + (17 * day),
      color: 'rgba(80, 180, 180, 0.7)'
    }]
  }, {
    name: 'Resource 2',
    data: [{
      name: 'Task D',
      y: 1,
      start: today - (1 * day),
      end: today + (6 * day)
    }, {
      name: 'Task E',
      y: 1.6,
      start: today + (7 * day),
      end: today + (9 * day),
      color: 'rgba(230, 180, 180, 0.7)'
    }, {
      name: 'Task F',
      y: 1,
      start: today + (11 * day),
      end: today + (12 * day)
    }, {
      name: 'Task G',
      y: 1,
      start: today + (14 * day),
      end: today + (16 * day)
    }]
  }, {
    name: 'Resource 3',
    data: [{
      name: 'Task H',
      y: 2,
      start: today - (1.5 * day),
      end: today + (4 * day)
    }, {
      name: 'Task I',
      y: 2,
      start: today + (6 * day),
      end: today + (9 * day)
    }, {
      name: 'Task J',
      y: 2,
      start: today + (10 * day),
      end: today + (14 * day)
    }, {
      name: 'Task K',
      y: 2.5,
      start: today + (15 * day),
      end: today + (17 * day),
      color: 'rgba(230, 180, 180, 0.7)'
    }]
  }]
});

Я вижу, что мы есть несколько штук, которые должны работать вместе. Сначала нам, кажется, требуется разрыв для каждой категории, которая будет иметь несколько строк, нам нужно установить для атрибута "y" десятичную часть смещения категории, и нам нужно применить преобразование к серии категорий.

Что неясно, так это то, как получены значения для breakSize, translate offset и "y".

Далее теперь используется серия для каждой категории, в то время как мы можем генерировать диаграммы из одной серии, например дерева. сетка, поэтому мы должны здесь разбить данные на отдельные серии? Мы предлагаем нашему пользователю возможность управлять сериями, чтобы они соответствовали легенду, так что это может быть проблемой.

Я заметил, что вы добавили цвет, и когда я не часто, я не видел свой диапазон, зачем это нужно?

Наконец, вы заметите, что в моей скрипке есть дополнительная категория с именем "3", которая появляется. Посмотрел на json входящий в метод ganttchart и после преобразования basi c, и я не вижу намека на то, откуда это может прийти?

Answer 1

Имейте в виду, что это только обходной путь, и это не реализованная функциональность, которая в некоторых случаях может не работать, как, например, см. В подсказке в вашем примере - она ​​не привязана должным образом (поскольку точка была переведена).

Что неясно, так это то, как получены значения для breakSize, translate offset и "y".

Мне кажется, что это поведение было неожиданным. В документации сказано, что:

Число, указывающее, сколько места должно оставаться между началом и концом перерыва. Размер разрыва указан в единицах оси, поэтому, например, на оси дата-время размер разрыва 3600000 будет указывать эквивалент часа.

API: https://api.highcharts.com/highcharts/yAxis.breaks

Нет информации о том, как увеличить строку по оси Y, но похоже, что breakSize, установленный в 1, увеличивает высоту строки yAxis вдвое.

Далее это теперь использует серию категория, в то время как мы можем генерировать диаграммы с одной серией, например, древовидной сеткой, так нужно ли нам здесь разбивать данные на отдельные серии? Мы предлагаем нашим пользователям возможность управлять сериями, чтобы они соответствовали легендам, так что это может быть проблемой.

Здесь я не на 100% уверен, что вы имели в виду. Я предполагал, что вы хотели бы создать что-то, о чем вы спрашивали здесь: Детали свертывания сетки Ганта HighCharts , но реализация этой функциональности потребует некоторых изменений в коде ядра.

I заметил, что вы добавили цвет, и когда я чаще всего этого не делал, я не видел свой диапазон, зачем это нужно?

Я обнаружил, что точки в гантте наследуют цвета от значения yAxis, которое им присваивается значение.

Например: первая точка присваивается значению 0 в оси y, что означает, что для этой точки установлен класс highcharts-point highcharts-color-0 Затем, во время рендеринга точек, функция проверяет, какой класс назначен, и заполняет этот цвет из цветового массива Highcharts по умолчанию для этой точки. Так что, если у точки установлено значение 0,5, это не сработает.

API для массива цветов: https://api.highcharts.com/highcharts/colors

Наконец, вы заметите, что в моей скрипке есть дополнительная категория с именем "3", которая появление. Посмотрел на json входящий в метод ganttchart и после базового c преобразования, и я не вижу намека на то, откуда это может прийти?

Этот '3' появляется, потому что вы имели определены только 3 категории, в то время как вы устанавливаете значение y для последней точки равным 2,5, что выше диапазона назначенных категорий.

Подводя итог - эта функция еще не реализована и то, что вы пытаетесь do - это намного больше, чем обычные опции API.