AmCharts Ganttに別のグラフを追加してカスタムアイコンを表示する方法

Question

私はいくつかのマイナーな調整を行っていますが、基本的にはThis gantt example with datesというクローンを持つガントチャートを持っています。

私がしようとしているのは、セグメントデータに含まれるいくつかの情報に基づいて、セグメントの隣にいくつかのアイコンが表示されていることです。私の場合は、3つの異なるバイナリ変数を持ち、値に応じて異なるアイコンを含んでいます。示すアイコンの私はすべての3（またはnone）を持っている能力を持っていることができるようにしたいしかし

：

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を設定するとこれまでのところ、これはOK作品。

私はセグメントデータを追加してから、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

Answer 1

配列を使用しようとしたとき、あなたが気づいたとして、それが唯一、一つのグラフオブジェクトを取り、これはガントチャートでは不可能です。

グラフのopenFieldプロパティを使用して、列の開始位置をシミュレートして、multi-segmented floating bar chartにすることで、ガントチャートをエミュレートできます。これを拡張してインジケータ用の追加のグラフオブジェクトを追加し、値に日付ベースのvalueAxisを使用できます（valueAxesには日付オブジェクトまたはミリ秒のタイムスタンプが必要なため、文字列は機能しません）。またはデモのような相対値を使用します。同じカテゴリのセグメントをシミュレートするには、複数のグラフオブジェクトを定義する必要があるという点で、これはGanttチャートより少し控えめです。