三分钟上手Highcharts简易甘特图

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

具体示例代码如下：

图片.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后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。