Javascript 海图中的导航器

我在图表中按年份显示数据我想使用navigator，这样用户可以导航到年份并查看特定年份的数据，但我无法解决的问题是，当我在highcharts中应用navigator时，它仍然是固定的，数据中是否有问题

  $(document).ready(function() {
        Highcharts.setOptions({
            chart: {
                type: 'line'
            },

            credits: {
                enabled: false
            },


            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            },

            //title: { text: ''},
            //subtitle: { text:''},
            //xAxis: { categories: '' },
            yAxis: {
                // reversed: true,
                title: {
                    text: 'Rank'
                },
                useHtml : Highcharts.hasBidiBug,


                labels: {
                    useHTML: true,
                    formatter: function () {
                        return this.value ;
                    }
                },
                min : 0,
                reversed: false,
                title: {
                    text: 'Rank',
                    useHtml : true

                }

            },
            xAxis: {
                labels : {
                    useHTML: true,
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }

            },
            plotOptions: {
                series: {
                    animation: {
                        duration: 4000,
                    },
                    showInNavigator: true
                },
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<b>{series.name}</b><br/>',
                //animation: [true],
                // pointFormat: '{point.x} Year: {point.y}'
            },


            legend : {
                enabled : true,
                useHTML: true

            }
            //series: ''

            //legend: {
            //    layout: 'vertical',
            //    align: 'right',
            //    verticalAlign: 'middle',
            //    borderWidth: 0
            //},

        });

        var chart1 = new Highcharts.Chart({
            chart:{renderTo:'container1'},
            navigator: {
                enabled: true , 

                xAxis: {
            dateTimeLabelFormats: {
            year: '%Y'
                     }
        }
            },
            rangeSelector: {
                enabled: false,
                selected:1,
            },

            title : {text :'GCI '},
            subtitle : {text : 'Source: © 2017 OSMM.'},
            xAxis: { categories: ['2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017']  },
            series: [{ name: 'Bahrain', data: [37,37,35,43,44,39,48] ,visible : false},{ name: 'Bhutan', data: [0,0,0,109,103,105,97] ,visible : false},{ name: 'China', data: [27,26,29,29,28,28,28] ,visible : false},{ name: 'India', data: [51,56,59,60,71,55,39] ,visible : false},{ name: 'Iran', data: [69,62,66,82,83,74,76] ,visible : false},{ name: 'KSA', data: [21,17,18,20,24,25,29] ,visible : false},{ name: 'Kuwait', data: [35,34,37,36,40,34,38] ,visible : false},{ name: 'Netherlands', data: [8,7,5,8,8,5,4] ,visible : false},{ name: 'Oman', data: [34,32,32,33,46,62,66,] , dataLabels: {  enabled: true }},{ name: 'Qatar', data: [17,14,11,13,16,14,18] ,visible : false},{ name: 'RUSSIAN FEDERATION', data: [63,66,67,64,53,45,43] ,visible : false},{ name: 'Rwanda', data: [80,70,63,66,62,58,52] ,visible : false},{ name: 'Singapore', data: [3,2,2,2,2,2,2] ,visible : false},{ name: 'UAE', data: [25,27,24,19,12,17,16] ,visible : false},{ name: 'United Kingdom', data: [12,10,8,10,9,10,7] ,visible : false},{ name: 'United State', data: [4,5,7,5,3,3,3] ,visible : false},{ name: 'Vietnam', data: [59,65,75,70,68,56,60] , visible : false}] 
            });

        var chart11 = $('#container1').highcharts();

        chart11.yAxis[0].update({
            title :{
                text : "Score"
            },
            reversed : true

        })


    });

$（文档）.ready（函数（）{
Highcharts.setOptions({
图表：{
类型：“行”
},
学分：{
已启用：false
},
选项3D：{
启用：对，
阿尔法：15，
贝塔：15，
深度：50，
视距：25
},
//标题：{文本：'}，
//副标题：{文本：'}，
//xAxis:{类别：'}，
亚克斯：{
//对,，
标题：{
文本：“排名”
},
useHtml:Highcharts.hasBidiBug，
标签：{
是的，
格式化程序：函数（）{
返回此.value；
}
},
分:0,，
相反：错，
标题：{
文本：“排名”，
useHtml:true
}
},
xAxis：{
标签：{
是的，
格式化程序：函数（）{
返回this.value；//年份的干净、未格式化的数字
}
}
},
打印选项：{
系列：{
动画：{
持续时间：4000，
},
showInNavigator：对
},
},
工具提示：{
是的，
headerFormat:“{series.name}
”，
//动画：[正确]，
//pointFormat:“{point.x}年：{point.y}”
},
图例：{
启用：对，
useHTML:true
}
//系列：“”
//图例：{
//布局：“垂直”，
//对齐：“右”，
//垂直排列：'中间'，
//边框宽度：0
//},
});
var chart1=新的高点图表。图表({
图表：{renderTo:'container1'}，
导航器：{
启用：对，
xAxis：{
日期时间标签格式：{
年份：'%Y'
}
}
},
范围选择器：{
启用：false，
选定：1，
},
标题：{文本：'GCI'}，
副标题：{文本：'来源：©2017 OSMM.}，
xAxis:{类别：['2010-2011'，'2011-2012'，'2012-2013'，'2013-2014'，'2014-2015'，'2015-2016'，'2016-2017']，
系列：[姓名：“巴林”，数据：[37,37,35,43,44,39,48]，可见：假]，[姓名：“不丹”，数据：[0,0109103105,97]，可见：假]，[姓名：“中国”，数据：[27,26,29,29,28,28,28]，可见：假]，[姓名：“印度”，数据：[51,56,59,60,71,55,39]，可见：假]，[姓名：“伊朗”，数据：[69,62,66,82,74,76]，可见：假}，{姓名：'KSA'，数据：[21,17,18,20,24,25,29]，可见：假}，{姓名：'科威特'，数据：[35,34,37,36,40,34,38]，可见：假}，{姓名：'荷兰'，数据：[8,7,5,8,8,8,5,4]，可见：假}，{姓名：'阿曼'，数据：[34,32,33,46,66]，数据标签：{启用：真}，{姓名：'卡塔尔'，数据：[17,14,11,13,16,18]，可见：假}，{姓名：'俄罗斯联邦'，数据：[63,66,67,64,53,45,43]，可见：假}，{姓名：'卢旺达'，数据：[80,70,63,66,62,58,52]，可见：假}，{姓名：'新加坡'，数据：[3,2,2,2,2,2,2,2]，可见：假}，{姓名：'阿联酋'，数据：[25,27,24,19,12,16]，可见：假}，{姓名：'联合王国'，数据：[12,10,8,10,7]，可见：假}，{名称：'美国'，数据：[4,5,7,5,3,3]，可见：假}，{名称：'越南'，数据：[59,65,75,70,68,56,60]，可见：假}]
});
var chart11=$（“#container1”）.highcharts（）；
图表11.yAxis[0]。更新({
标题：{
文字：“分数”
},
对
})
});

小提琴： 防止导航器设置极端值

将

minRange

设置为

1

xAxis: {
        minRange: 1,
        categories: ['2010-2011', '2011-2012', '2012-2013', '2013-2014', '2014-2015', '2015-2016', '2016-2017']
      },

例如：