Chartjs - 開始値と終了値を棒グラフに設定する

Question

ChartjsのようにGanttダイアグラムを溺死させる作業をしています。

私がしようとしているのは、各バーの最小値を設定する混合タイプとして、ペイントと時間タイプのHorizo​​ntalBarChartですが、動作しないようです。

マイコード：

new Chart(document.getElementById("customChart"), { 
    type: 'horizontalBar', 

     data: { 
      labels: ['Item 1', 'Item 2'], 
      datasets: [ 
       { 
        type: 'horizontalBar', 
        label: 'Bar Component1', 
        data: [new Date(2017,02,26) ], 
        options:{ 
         scales:{ 
          xAxes: [{ 

            type: 'time', 
            unit: 'day', 
            unitStepSize: 1, 
           time: { 
            displayFormats: { 
             'day': 'YYYY-MM-DD' 
            }, 
            min: new Date(2017,03,24) 
           } 
          }] 
         } 
        } 
       }, 
       { 
        type: 'horizontalBar', 
        label: 'Bar Component2', 
        data: [new Date(2017,02,14)], 
        options:{ 
         scales:{ 
          xAxes: [{ 

            type: 'time', 
            unit: 'day', 
            unitStepSize: 1, 
           time: { 
            displayFormats: { 
             'day': 'YYYY-MM-DD' 
            }, 
            min: new Date(2017,02,10) 
           } 
          }] 
         } 
        } 
       } 
      ] 
     } 

}); 

はこれを実現するために任意の回避策はありますか？別のライブラリを使うべきですか？

Answer 1

残念ながら、グラフにプロットする各データセットは原点（縮尺に設定された最小値）から始まるか、またはグラフの上に重ねて表示されるため、chart.jsを設定してガントチャートを作成する方法はありませんお互い。棒グラフを積み重ねるようにチャートを設定することはできませんが、異なる "レーン"（これはガントチャートに必要なものです）に表示することはできません。

複数のスケールを作成しようとしても（試行しているように見えますが）、2番目のバーは原点から開始されます（2番目のスケールの原点は指定した最小値になります） 。換言すれば、両方のバーは依然としてy軸に接触する。

chart.jsの設定にはいくつかの問題がありました。まず、データセットにスケール設定を定義することはできません。次に、いくつかのタイムスケールオプションを使用しようとしましたが、それらはtimeオブジェクトの内側になければなりません。

すべてを整理して、チャートを正しく定義する方法を知ることができます。これを実証するcodepenがあります。