收藏好的文章到这个专题

三分钟上手Highcharts简易甘特图

2018-08-21  本文已影响153人  祈澈菇凉

根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用。首先要引入支持文件:可根据链接下载。
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后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

上一篇下一篇

猜你喜欢

热点阅读