复杂甘特图的使用

对于程序员来说，在制作图表的时候使用频率最高的应该是echarts和highcharts两种，最近这段的时间我在使用highcharts进行开发甘特图的功能，做的比较简单，进行一个简单的分享。
如果你用的是比较流行的前端框架，基本网上都用进行使用的简单教程，直接进行引入highcharts-gantt.js即可。甘特图js下载地址

由于我们使用的backbone作为前端的框架，简单的记录一下自己在本系统制作甘特图的过程中遇到的一些棘手的问题。
首先遇到的第一个问题就是high-gantt.js引入的问题，在刚开始进行引入js时，本来应该显示的甘特图竟然出乎意料的不显示，这个就很无奈了，既然遇到了问题，对于我们来说就要去积极的解决问题，这也是当初喜欢编程的原因，每一次get到新的技术点，都感到编程的世界是真的有趣。
经过一番的找呀找朋友的努力，将问题的解决办法定位到highcharts命名空间冲突的问题上，因为在之前在系统已经将highcharts-stock进行了引入并进行使用，stock会将新引入的gantt.js进行覆盖，既然找到问题所在就要去解决
解决办法：
我们使用iframe进行内链，将想要进行显示的甘特图单独的放在gantt.html页面当中，并在charts.js中使用iframe将gantt.html的路径进行引入，将整个页面添加到想要放入的盒子中。
gantt.html

<style>
    /* 隐藏当前页面滚动条 */
    body::-webkit-scrollbar {
   
        display: none;
    }

    body {
   
        margin: 0;
    }
</style>
<div style="border:1px solid #e4eded" id="GTBox">

    <div ID="GTcontainer" style="min-width: 3000px;"></div>
</div>
//gantt.js在本地路径
<script src="../../../framework/highcharts/highcharts-gantt.js"></script>
<script>

    // 甘特图数据
    // 下拉框切换控制x轴显示格式
    // 改变tickInterval 进行周 和 月之间的切换
    if (window.parent.ganttType == '周') {
   
        window.parent.ganttXAis = [{
   
        因为我的甘特图有两个x轴，所以xAxis就是一个数组，第一个对象控制下面x轴的相关样式，第二个对象控制最上面x轴的相关样式
            gridLineWidth: 1,
            tickInterval: 24 * 3600 * 1000, //以周/日格式显示
            type: 'datetime'