Question

我有一个甘特图，有一些小调整，但基本上是This gantt example with dates的克隆。

我想要做的是根据细分数据中包含的一些信息在细分受众群旁边放置一些图标。我的案例包括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
      },
    } );
  }

任何帮助表示赞赏！

中号

Answer 1

这在甘特图中是不可能的，因为它只需要一个图形对象，正如您在尝试使用数组时所注意到的那样。

您可以通过制作multi-segmented floating bar chart来模拟甘特图，使用图形的openField属性来模拟列的开始位置。您可以对此进行扩展，为指标添加其他图形对象，并为值使用基于日期的valueAxis（请注意，valueAxes需要日期对象或毫秒时间戳，因此字符串不起作用）或使用相似的值，如演示中所示。请注意，这比甘特图有点笨拙，因为您必须定义多个图形对象来模拟同一类别的细分。

如何将另一个图表添加到AmCharts Gantt以显示自定义图标

1 个答案: