Как добавить еще один график в AmCharts Gantt для отображения пользовательских значков

У меня есть диаграмма Ганта с несколькими незначительными изменениями, но в основном это клон Этот пример Ганта с даты.

Что я пытаюсь сделать, так это иметь несколько значков рядом с сегментом на основе некоторой информации, включенной в данные сегмента. Мой случай включает в себя наличие 3 разных двоичных переменных и включение разных значков в зависимости от значений.

  var chartData = [{
        category: task.name,
        segments: [
          {
            start: task.parallel ? lastStart : moment(latestEnd).format(string),
            end: task.parallel ? moment(lastStart).add(time,'m').format(string) : moment(latestEnd).add(time,'m').format(string),
            color: '#1C7DDB',
            time: task.time,
            indicator1: task.checkOne== 1 ? '../img/path_to_icon.svg' : '',
            indicator2: task.checkTwo== 1 ? '../img/path_to_icon2.svg' : '',
            indicator3: task.checkThree== 1 ? '../img/path_to_icon3.svg': ''
          }
        ]
      },
      ...
      }]

Пока это работает нормально, когда я устанавливаю для customeBullet одну из переменных: Ганта с пользовательским значком маркера

Однако я хочу иметь возможность отображать все 3 (или ни одного) значка.

Я думаю, что мне нужно сначала добавить данные сегмента, а затем добавить значки в виде трех графиков к диаграмме Ганта без видимой линии.

Мой текущий код инициализации диаграммы находится здесь, я попытался изменить graph: {} на graphs: [], но это вызывает ошибку.

var chart = AmCharts.makeChart( "plannerChart", {
      "type": "gantt",
      "marginRight": 70,
      "period": "DD",
      "dataDateFormat": "YYYY-MM-DD HH:mm",
      "columnWidth": 0.75,
      "addClassNames": true,
      "valueAxis": {
        "type": "date",
        "guides": [
          {
            "value": AmCharts.stringToDate( start, "YYYY-MM-DD HH:NN"),
            "toValue": AmCharts.stringToDate( moment(start).add(timeWindow,'h').format('YYYY-MM-DD HH:mm'), "YYYY-MM-DD HH:NN"),
            "lineAlpha": 0.2,
            "lineColor": guideColor,
            "lineThickness": 3,
            "fillAlpha": 0.1,
            "fillColor": guideColor,
            "label": "Available time",
            "inside": false
          }
        ]
      },
      "brightnessStep": 7,
      "graph": {
        "fillAlphas": 1,
        "lineAlpha": 1,
        "bulletOffset": 25,
        "bulletSize": 20,
        "customBulletField": "indicator1",
        "lineColor": "#0F238C",
        "fillAlphas": 0.85,
        "balloonText": "<b>Start</b>: [[start]]<br /><b>Finish</b>: [[end]]"
      },
      "rotate": true,
      "categoryField": "category",
      "segmentsField": "segments",
      "colorField": "color",
      "startDateField": "start",
      "endDateField": "end",
      "dataProvider": chartData,
      "chartCursor": {
        "cursorColor": "#0F238C",
        "valueBalloonsEnabled": false,
        "cursorAlpha": 0,
        "valueLineAlpha": 0.5,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "zoomable": false,
        "valueZoomable": false
      },
    } );
  }

Любая помощь приветствуется!

M


gantt-chart amcharts
person Martin O Leary    schedule 07.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это невозможно в диаграмме Ганта, поскольку она принимает только один объект графика, как вы заметили при попытке использовать массив.

Вы можете эмулировать диаграмму Ганта, создав многосегментную плавающую гистограмму., используя свойство openField графика для имитации начала столбца. Вы можете расширить это, чтобы добавить свои дополнительные графические объекты для своих индикаторов и использовать valueAxis на основе даты для ваших значений (обратите внимание, что valueAxes требуют объектов даты или меток времени в миллисекундах, поэтому строки не будут работать) или использовать относительные значения, как в демонстрации. Обратите внимание, что это немного неуклюже, чем диаграмма Ганта, поскольку вам нужно определить несколько графических объектов для имитации сегментов в одной и той же категории.

person xorspark    schedule 07.06.2017
comment
Эй, спасибо за ответ. Я думаю, что механика этого маршрута приведет меня к бесконечным проблемам, поэтому я могу просто создать кучу разных значков и вместо этого использовать некоторую логику для создания комбинированных значков. Сохраняет код диаграммы чистым. Отпишусь здесь, когда разберусь. Если это слишком болезненно, я могу просто попробовать пойти по этому пути. - person Martin O Leary; 08.06.2017