Я хочу рисовать диаграммы Ганта, как показано нижеКак рисовать диаграммы Ганта с использованием диаграммы JS или другие библиотеки
Там нет возможности рисовать диаграммы Ганта в диаграмме JS. Является ли это возможным?? если это невозможно, предложите мне некоторые графические библиотеки, чтобы нарисовать график следующим образом:
Предлагаю вам Диаграмма рассеяния. В Scatter Charts вы можете рисовать несколько независимых строк. Как вы можете видеть из приведенного ниже изображения.
[Пример кода]
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
}
}]
}
}
});
Rest конфигурация как цвета или если вы хотите, чтобы скрыть оси у делать это в соответствии с требованиями вашего проекта.
Вы можете попробовать эту библиотеку jQuery.Gantt. Это очень полезно и предоставляет множество вариантов для рисования диаграммы Ганта.
EDIT Этот метод не будет работать эффективно для более сложных случаев, когда необходимо отображать несколько столбцов для одного значения 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>Другим вариантом является открытым исходным кодом Frappé Gantt