Chartjs - 將開始和結束值設置爲條形圖

我正在研究像Chartjs一樣的甘特圖。Chartjs - 將開始和結束值設置爲條形圖

我想要做的是繪製和HorizontalBarChart與時間類型，作爲混合類型，其中我爲每個欄設置最小值，但似乎不起作用。

我的代碼：

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) 
           } 
          }] 
         } 
        } 
       } 
      ] 
     } 

});

是否有爲了實現這個什麼解決辦法？我應該使用另一個庫嗎？

來源

2017-03-16 Gabriel

不幸的是，沒有辦法配置chart.js來生成甘特圖，因爲您在圖上繪製的每個數據集都是從原點開始（比例尺上設置的最小值）或者堆積在彼此。您不能將圖表配置爲堆疊條，而是將其顯示在不同的「通道」中（這是甘特圖需要的）。

即使您試圖創建多個比例（看起來像您正在嘗試），它將無法正常工作，因爲第二個小節仍然會從原點開始（但第二個比例的原點將是您指定的最小值）。換句話說，這兩個小節仍然會接觸y軸。

您在chart.js配置中遇到了幾個問題。首先，您不能在數據集中定義比例配置。其次，您嘗試使用多個時間刻度選項，但它們必須位於time對象內。

我清理了所有東西，以便您可以看到如何正確定義圖表。這是演示這個的codepen。

來源

2017-03-16 16:36:33 jordanwillis

Chartjs - 將開始和結束值設置爲條形圖

回答

相關問題