如何使用图表 js 或其他库绘制甘特图 [英] How to Draw Gantt chart using chart js or other libraries

问题描述

我想画下甘特图

图表js中没有绘制甘特图的选项.是否可以??如果不可能，请建议我一些图表库来绘制这样的图表

There is no option to draw Gantt chart in chart js. is it possible?? if not possible please suggest me some charting libraries to draw graph like this

推荐答案

我建议你散点图.在散点图中，您可以绘制多条独立的线.如下图所示.

I suggest you Scatter Chart. In Scatter Charts, you can draw multiple independent lines. As you can see from the below image.

[示例代码]

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 轴，请按照您的项目要求进行.

Rest the configuration like colors or if you want to hide the y axes do it as your project required.

这篇关于如何使用图表 js 或其他库绘制甘特图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！