2017-05-09 18 views
0

我在数据表显示数据年我明智地使用导航器,因此用户可以导航到年和看到特定年份的数据,但我不能修正的问题是当我应用导航器在highcharts它仍然是固定的,数据有问题吗?导航员在Highcharts

$(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/

回答