Я ищу диаграмму javascript как диаграмму gant, но она не должна иметь ось y. данные приведены только с осью x. Здесь я прикрепил образец для диаграммы. Поиск во всех графиках доступен с помощью javascript, но я не могу найти решение.как рисовать диаграмму gantt javascript только с осью x
Заранее благодарим за помощь. 
FusionWidgets, часть FusionC harts, можно использовать для рендеринга диаграммы Ганта. В соответствии с основной философией FusionCharts он предлагает широкий спектр атрибутов для настройки в соответствии с требованиями. Пожалуйста, обратитесь к docs, чтобы поиграть с диаграммой. Пожалуйста, посетите gallery, чтобы просмотреть больше образцов.
Для вашего вышеуказанного требования не иметь названия оси y, ganttWidthPercent может быть установлено в 100. Ниже приведена реализация так или иначе fiddle demo.
FusionCharts.ready(function() {
var timeShiftChart = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"outputdateformat": "hh:mn",
"caption": "Development Division - Work Schedule",
"canvasBorderAlpha": "30",
"ganttWidthPercent": "100",
"useVerticalScrolling": "0",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 23:59:59",
"label": "Today"
}, {
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 23:59:59",
"label": "Tomorrow"
}]
}, {
"align": "right",
"category": [{
"start": "7/15/2014 00:00:00",
"end": "7/15/2014 05:59:59",
"label": "6 am"
}, {
"start": "7/15/2014 06:00:00",
"end": "7/15/2014 11:59:59",
"label": "12 pm"
}, {
"start": "7/15/2014 12:00:00",
"end": "7/15/2014 17:59:59",
"label": "6 pm"
}, {
"start": "7/15/2014 18:00:00",
"end": "7/15/2014 23:59:59",
"label": "Midnight"
}, {
"start": "7/16/2014 00:00:00",
"end": "7/16/2014 05:59:59",
"label": "6 am"
}, {
"start": "7/16/2014 06:00:00",
"end": "7/16/2014 11:59:59",
"label": "12 pm"
}, {
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 17:59:59",
"label": "6 pm"
}, {
"start": "7/16/2014 18:00:00",
"end": "7/16/2014 23:59:59",
"label": "Midnight"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [{
"label": "John S.",
"id": "EMP121"
}, {
"label": "David G.",
"id": "EMP122"
}, {
"label": "Mary P.",
"id": "EMP123"
}, {
"label": "Andrew H.",
"id": "EMP124"
}, {
"label": "Neil M.",
"id": "EMP125"
}]
},
"tasks": {
"showlabels": "1",
"showstartdate": "1",
"task": [{
"processid": "EMP121",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:30:00",
"label": "Logo A"
}, {
"processid": "EMP121",
"start": "7/15/2014 17:00:00",
"end": "7/15/2014 19:30:00",
"label": "Logo B"
}, {
"processid": "EMP121",
"start": "7/16/2014 09:00:00",
"end": "7/16/2014 19:30:00",
"label": "Website template"
}, {
"processid": "EMP122",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 20:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP122",
"start": "7/16/2014 10:00:00",
"end": "7/16/2014 20:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP123",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 12:00:00",
"label": "L1 Support"
}, {
"processid": "EMP123",
"start": "7/16/2014 15:00:00",
"end": "7/16/2014 21:30:00",
"label": "L1 Support"
}, {
"processid": "EMP124",
"start": "7/15/2014 08:00:00",
"end": "7/15/2014 20:30:00",
"label": "L2 support"
}, {
"processid": "EMP124",
"start": "7/16/2014 08:00:00",
"end": "7/16/2014 20:30:00",
"label": "L2 support"
}, {
"processid": "EMP125",
"start": "7/15/2014 10:00:00",
"end": "7/15/2014 14:30:00",
"label": "Network Maintenance"
}, {
"processid": "EMP125",
"start": "7/16/2014 12:00:00",
"end": "7/16/2014 14:30:00",
"label": "System OS Updates"
}]
}
}
}).render();
});<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Date and Time Based Gantt chart -->
<div id="chart-container">FusionCharts will render here</div> google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Javascript
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
Спасибо Jaydeep Gondaliya. – Pradeep
Можно ли добавить в первый столбец (ось x Mar-June) и второй столбец (июнь - сентябрь) сделать как первую строку. и оба имеют различную цветовую индикацию. – Pradeep
[здесь ссылка] (https://developers.google.com/chart/interactive/docs/gallery/ganttchart) для диаграммы gantt диаграммы google. метки «оси x» автоматически настраиваются в соответствии с предоставленными данными. поэтому вы не можете контролировать, какой текст отображается ... – WhiteHat