Как нарисовать диаграмму Ганта с помощью chart js или других библиотек

Я хочу нарисовать диаграмму Ганта, как показано ниже



Введите описание изображения здесь



В диаграмме js нет возможности нарисовать диаграмму Ганта. возможно ли это?? если это невозможно, пожалуйста, предложите мне некоторые библиотеки диаграмм, чтобы нарисовать график, как это

801   4  

4 ответов:

Я предлагаю вам диаграмму рассеяния. В точечных диаграммах можно нарисовать несколько независимых линий. Как вы можете видеть из приведенного ниже изображения.
Введите описание изображения здесь

[Пример Кода ] 

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, сделайте это так, как требуется для вашего проекта.

6  
2016-12-21 16:20:01

EDIT Этот метод не будет эффективно работать для более сложных случаев, когда для одного значения Y нужно показать несколько баров.

Я бы пошел с диаграммой stacked horizontalbar из двух наборов данных. Первый набор данных будет прозрачным и будет использоваться для смещения второго набора данных, который является вашими фактическими данными. Приведенный ниже код предотвращает появление всплывающей подсказки для первого набора данных в виде хорошо.

Введите описание изображения здесь

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>
5  
2017-08-16 20:10:55

Вы можете попробовать эту библиотеку jQuery.Гантт . Это очень полезно и предоставляет множество вариантов для рисования диаграммы Ганта

1  
2016-12-21 13:38:18

Другой вариант с открытым исходным кодом - Frappé Gantt

1  
2017-09-25 20:47:58

Comments

    Ничего не найдено.
Click here to cancel reply.