Google Charts制作一个简单的甘特图

无足鸟丶

已于 2024-02-06 10:42:16 修改

阅读量293

点赞数 3

文章标签：甘特图

于 2024-02-06 10:41:45 首次发布

本文链接：https://blog.csdn.net/qq_45089709/article/details/136053045

版权

本文介绍了如何使用GoogleCharts库在HTML页面上创建一个基本的甘特图，通过展示一个包含任务、开始日期、结束日期等信息的数据表来呈现项目进度。

摘要由CSDN通过智能技术生成

有多个流行的JavaScript库可以用来创建甘特图，比如Google Charts、DHTMLX Gantt、Highcharts等。下面以Google Charts为例，演示如何创建一个简单的甘特图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="gantt_chart" style="width: 500px;height: 300px;"></div>
</body>

</html>
<script type="text/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([
            // 示例任务数据
            ['Research', 'Find sources', null, new Date(2024, 0, 1), new Date(2024, 0, 5), null, 100, null],
            ['Write', 'Write paper', 'write', new Date(2024, 0, 6), new Date(2024, 0, 9), null, 25, 'Research'],
            ['Cite', 'Create bibliography', 'write', new Date(2024, 0, 9), new Date(2024, 0, 10), null, 20, 'Write'],
            ['Complete', 'Hand in paper', 'complete', new Date(2024, 0, 11), new Date(2024, 0, 12), null, 0, 'Cite']
        ]);
        var options = {
            height: 400,
            gantt: {
                trackHeight: 30
            }
        };

        var chart = new google.visualization.Gantt(document.getElementById('gantt_chart'));
        chart.draw(data, options);
    }
</script>