如何使用chart js或其他庫繪制甘特圖

Question

我想繪制如下甘特圖

在圖表js中沒有繪制甘特圖的選項。 是否可以？？ 如果不可能，請建議我一些圖表庫來繪制這樣的圖形

Answer 1

我建議你散點圖。 在散點圖中，您可以繪制多條獨立的線。 如下圖所示。

[示例代碼]

var scatterChart = new Chart(ctx1, {
        type: 'line',
        data: {
            datasets: [
            {

                label: 'Scatter Dataset',
                backgroundColor: "rgba(246,156,85,1)",
                borderColor: "rgba(246,156,85,1)",
                fill: false,
                borderWidth : 15,
                pointRadius : 0,
                data: [
                    {
                        x: 0,
                        y: 9
                    }, {
                        x: 3,
                        y: 9
                    }
                ]
            },
            {
                backgroundColor: "rgba(208,255,154,1)",
                borderColor: "rgba(208,255,154,1)",
                fill: false,
                borderWidth : 15,
                pointRadius : 0,
                data: [
                    {
                        x: 3,
                        y: 7
                    }, {
                        x: 5,
                        y: 7
                    }
                ]
            },
            {

                label: 'Scatter Dataset',
                backgroundColor: "rgba(246,156,85,1)",
                borderColor: "rgba(246,156,85,1)",
                fill: false,
                borderWidth : 15,
                pointRadius : 0,
                data: [
                    {
                        x: 5,
                        y: 5
                    }, {
                        x: 10,
                        y: 5
                    }
                ]
            },
            {
                backgroundColor: "rgba(208,255,154,1)",
                borderColor: "rgba(208,255,154,1)",
                fill: false,
                borderWidth : 15,
                pointRadius : 0,
                data: [
                    {
                        x: 10,
                        y: 3
                    }, {
                        x: 13,
                        y: 3
                    }
                ]
            }
            ]
        },
        options: {
            legend : {
                display : false
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    ticks : {
                        beginAtzero :true,
                        stepSize : 1
                    }
                }],
                yAxes : [{
                    scaleLabel : {
                        display : false
                    },
                    ticks : {
                        beginAtZero :true,
                        max : 10
                    }
                }]
            }
        }
    });

保留顏色等配置，或者如果您想隱藏 y 軸，請根據您的項目需要進行設置。

Answer 2

編輯此方法對於需要為單個 Y 值顯示多個條形的更復雜情況無效。

我會使用兩個數據集的堆疊水平條形圖。 第一個數據集將是透明的，用於抵消作為您的實際數據的第二個數據集。 下面的代碼也防止出現第一個數據集的工具提示。

http://codepen.io/pursianKatze/pen/OmbWvZ?editors=1111

[示例代碼]

 var barOptions_stacked = { hover :{ animationDuration:10 }, scales: { xAxes: [{ label:"Duration", ticks: { beginAtZero:true, fontFamily: "'Open Sans Bold', sans-serif", fontSize:11 }, scaleLabel:{ display:false }, gridLines: { }, stacked: true }], yAxes: [{ gridLines: { display:false, color: "#fff", zeroLineColor: "#fff", zeroLineWidth: 0 }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize:11 }, stacked: true }] }, legend:{ display:false }, }; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["1", "2", "3", "4"], datasets: [{ data: [50,150, 300, 400, 500], backgroundColor: "rgba(63,103,126,0)", hoverBackgroundColor: "rgba(50,90,100,0)" },{ data: [100, 100, 200, 200, 100], backgroundColor: ['red', 'green', 'blue', 'yellow'], }] }, options: barOptions_stacked, }); // this part to make the tooltip only active on your real dataset var originalGetElementAtEvent = myChart.getElementAtEvent; myChart.getElementAtEvent = function (e) { return originalGetElementAtEvent.apply(this, arguments).filter(function (e) { return e._datasetIndex === 1; }); }

 .graph_container{ display:block; width:600px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> <html> <body> <div class="graph_container"> <canvas id="myChart"></canvas> </div> </body> </html>

Answer 3

另一個開源選項是Frappé Gantt

Answer 4

你可以試試這個庫jQuery.Gantt 。 它非常有用，並提供了許多繪制甘特圖的選項

Answer 5

一個簡單的解決方案是使用 quickchart.io

quickchart.io 上的優秀支持人員非常友好地向我發送了一個示例，其中包含 x 軸上的日期，這與上面的一些答案不同。 您可以在此處訪問示例。

如果您想在 Gmail 電子郵件中嵌入甘特圖，您首先需要將 HTML 發送到諸如 htmlcsstoimage.com 之類的服務