三分钟上手Highcharts简易甘特图

程序员文章站 2024-02-26 13:07:10

...

根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。
exporting.js：https://img.hcharts.cn/highcharts/modules/exporting.js
xrange.js：https://img.hcharts.cn/highcharts/modules/xrange.js

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/xrange.js"></script>

具体示例代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>三分钟上手Highcharts简易甘特图</title>
    </head>

    <body>
        <!-- 图表容器 DOM -->
        <div id="container" style="width: 600px;height:400px;"></div>
        <!-- 引入 highcharts.js -->
        <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="js/exporting.js"></script>
        <script src="js/xrange.js"></script>
        <script>
            // 图表配置
            var options = {
                chart: {
                    type: 'xrange'
                },
                title: {
                    text: '简易甘特图'
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        week: '%Y/%m/%d'
                    }
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    categories: ['深睡眠', '浅睡眠', '醒着的'],
                    reversed: true
                },
                tooltip: {
                    dateTimeLabelFormats: {
                        day: '%Y/%m/%d'
                    }
                },
                series: [{
                    name: '睡眠检测',
                    // pointPadding: 0,
                    // groupPadding: 0,
                    borderColor: 'gray',
                    pointWidth: 20,
                    data: [{
                        x: Date.UTC(2014, 10, 21),
                        x2: Date.UTC(2014, 11, 2),
                        y: 0,
                        partialFill: 0.25
                    }, {
                        x: Date.UTC(2014, 11, 2),
                        x2: Date.UTC(2014, 11, 5),
                        y: 1
                    }, {
                        x: Date.UTC(2014, 11, 8),
                        x2: Date.UTC(2014, 11, 9),
                        y: 2
                    }, {
                        x: Date.UTC(2014, 11, 9),
                        x2: Date.UTC(2014, 11, 19),
                        y: 1
                    }, {
                        x: Date.UTC(2014, 11, 10),
                        x2: Date.UTC(2014, 11, 23),
                        y: 2
                    }],
                    dataLabels: {
                        enabled: true
                    }
                }]
            };
            // 图表初始化函数
            var chart = Highcharts.chart('container', options);

            
        </script>
    </body>

</html>

图片.png

在线测试：https://www.hcharts.cn/demo/highcharts/x-range

在项目需求中，x轴要表示24小时之内的状态，不可以使用年月日坐标轴，需要使用时分秒，那么highcharts 怎么设置x轴时间格式？这个问题卡了好久，因为网上没有找到合适的方案，关于Highcharts图表的博客也不是很多，只能自己动手研究了

看完数据交互的文档，心中似乎有了答案，所以说啊，技术万变不离其宗，遇到问题，一定要反复研究api,这里有你想要的一切答案。关于数据交互：如果不懂x轴和y轴数据类型和格式，可以查看数据交互文档
https://www.hcharts.cn/docs/basic-series

另外

如果要去掉右下角highchart.com和右上角的打印及导出按钮

图片.png

去掉右下角的highcharts.com需要加入以下内容：

    credits: {
              enabled:false
    },

如果不设置，那么默认为显示。

    exporting: {
                enabled:false
    },

图片.png

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

上一篇： Java填充替换数组元素实例详解原创

下一篇：三分钟上手Highcharts简易甘特图