Ich bin auf der Suche nach einem Javascript-Diagramm wie Gant-Diagramm, aber es muss nicht Y-Achse haben. Daten nur mit der jeweiligen x-Achse angegeben. Hier habe ich das Beispieldesign für Diagramm beigefügt. Gesucht in allen verfügbaren Diagrammen mit Javascript, aber ich kann keine Lösung finden.Wie zeichne ich ein Javascript-Gantt-Diagramm mit nur der x-Achse
Vielen Dank im Voraus für Hilfe. 
FusionWidgets, ein Teil von FusionC Harts-Bibliothek, kann zum Rendern eines Gantt-Diagramms verwendet werden. Gemäß der Kernphilosophie von FusionCharts bietet es eine große Auswahl an Attributen, die entsprechend den Anforderungen konfiguriert werden können. Bitte beachten Sie die docs, um mit Ihrem Diagramm herumzuspielen. Bitte besuchen Sie gallery, um mehr Proben zu sehen.
Für Ihre obige Anforderung, keinen y-Achsennamen zu haben, kann ganttWidthPercent auf 100 gesetzt werden. Unten ist eine Implementierung von so oder so 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);
}
Danke Jaydeep Gondaliya. – Pradeep
Ist es möglich, in der ersten Spalte (X-Achse März-Juni) und zweiten Spalte (Juni - September) als erste Zeile hinzuzufügen. und beide haben unterschiedliche Farbanzeigen. – Pradeep
[Hier ist die Referenz] (https://developers.google.com/chart/interactive/docs/gallery/ganttchart) für das Google-Chart-Gantt-Diagramm. Die "x-axis" -Etiketten werden automatisch gemäß den bereitgestellten Daten angepasst. Sie können also nicht kontrollieren, welcher Text angezeigt wird ... – WhiteHat