我在我的图表中显示数据年份我希望使用导航器,因此用户可以导航到年份并查看该特定年份的数据,但我无法修复的问题是当我在高级图表中使用导航器时它仍然是固定的,是否存在数据存在问题?
$(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
})
});
小提琴:
http://jsfiddle.net/wz33ng9h/
答案 0 :(得分:0)
xAxis.minRange阻止导航器设置极限。
将minRange
设为1
xAxis: {
minRange: 1,
categories: ['2010-2011', '2011-2012', '2012-2013', '2013-2014', '2014-2015', '2015-2016', '2016-2017']
},