1. дома
  2. Вопрос и ответ
  3. Как плагин HighChart jquery генерирует метки Y

Как плагин HighChart jquery генерирует метки Y

2011-12-13 2 views
0

Где начальные числа и значение приращения для первичной и вторичной оси y? Почему они начинаются с 5 и 0 и увеличиваются с номерами? Я хочу создать ярлыки, которые идут через определенные промежутки времени, а не те, которые содержатся в этом коде. Я просто не могу понять, где его изменить.Как плагин HighChart jquery генерирует метки Y

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 


     <!-- 1. Add these JavaScript inclusions in the head of your page --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
     <script type="text/javascript" src="../js/highcharts.js"></script> 

     <!-- 1a) Optional: add a theme file --> 
     <!-- 
      <script type="text/javascript" src="../js/themes/gray.js"></script> 
     --> 

     <!-- 1b) Optional: the exporting module --> 
     <script type="text/javascript" src="../js/modules/exporting.js"></script> 


     <!-- 2. Add the JavaScript to initialize the chart on document ready --> 
     <script type="text/javascript"> 

      var chart; 
      $(document).ready(function() { 
       chart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'container', 
         zoomType: 'xy' 
        }, 
        title: { 
         text: 'Average Monthly Temperature and Rainfall in Tokyo' 
        }, 
        subtitle: { 
         text: 'Source: WorldClimate.com' 
        }, 
        xAxis: [{ 
         categories: ['0','50', '100', '150', '200', '250', '300', 
          '350', '400', '450', '500'] 
        }], 
        yAxis: [{ // Primary yAxis 
         labels: { 
          formatter: function() { 
           return this.value + 100+ '°C'; 
          }, 
          style: { 
           color: '#89A54E' 
          } 
         }, 
         title: { 
          text: 'Temperature', 
          style: { 
           color: '#89A54E' 
          } 
         } 
        }, { // Secondary yAxis 
         title: { 
          text: 'Rainfall', 
          style: { 
           color: '#4572A7' 
          } 
         }, 
         labels: { 
          formatter: function() { 
           return this.value +' mm'; 
          }, 
          style: { 
           color: '#4572A7' 
          } 
         }, 
         opposite: true 
        }], 
        tooltip: { 
         formatter: function() { 
          return ''+ 
           this.x +': '+ this.y + 
           (this.series.name == 'Rainfall' ? ' mm' : '°C'); 
         } 
        }, 
        legend: { 
         layout: 'vertical', 
         align: 'left', 
         x: 120, 
         verticalAlign: 'top', 
         y: 100, 
         floating: true, 
         backgroundColor: '#FFFFFF' 
        }, 
        series: [{ 
         name: 'Rainfall', 
         color: '#4572A7', 
         type: 'column', 
         yAxis: 1, 
         data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]  

        }, { 
         name: 'Temperature', 
         color: '#89A54E', 
         type: 'spline', 
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9] 
        }] 
       }); 


      }); 

     </script> 

    </head> 
    <body> 

     <!-- 3. Add the container --> 
     <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 


    </body> 
</html>

источник

2011-12-13 lodkkx

ответ

Смежные вопросы

 Смежные вопросы