Highcharts - Yapılandırma Sözdizimi

Bu bölümde, Highcharts API kullanarak bir grafik çizmek için gereken yapılandırmayı göstereceğiz.

1. Adım: HTML Sayfası Oluşturun

JQuery ve Highcharts javascript kitaplıklarıyla bir HTML sayfası oluşturun.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

İşte container div, Highcharts kitaplığı kullanılarak çizilen grafiği içermek için kullanılır.

2. Adım: Konfigürasyonlar Oluşturun

Highcharts kitaplığı, json sözdizimini kullanan çok basit yapılandırmalar kullanır.

$('#container').highcharts(json);

Burada json, Highcharts kitaplığının highcharts () yöntemini kullanarak konteyner div içinde bir grafik çizmek için kullandığı json verilerini ve yapılandırmasını temsil eder. Şimdi, gerekli json dizesini oluşturmak için çeşitli parametreleri yapılandıracağız.

Başlık

Grafiğin başlığını yapılandırın.

var title = {
   text: 'Monthly Average Temperature'   
};

alt yazı

Grafiğin alt başlığını yapılandırın.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Kayan şeridi X Ekseni üzerinde görüntülenecek şekilde yapılandırın.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

Y Ekseninde görüntülenecek başlık, çizim çizgilerini yapılandırın.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

araç ipucu

Araç ipucunu yapılandırın. Değerden sonra eklenecek son eki (y ekseni) koyun.

var tooltip = {
   valueSuffix: '\xB0C'
}

efsane

Göstergeyi, diğer özelliklerle birlikte grafiğin sağ tarafında görüntülenecek şekilde yapılandırın.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

dizi

Grafikte görüntülenecek verileri yapılandırın. Seri, bu dizinin her öğesinin grafikte tek bir satırı temsil ettiği bir dizidir.

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

3. Adım: json verilerini oluşturun

Tüm konfigürasyonları birleştirin.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Adım 4: Grafiği çizin

$('#container').highcharts(json);

Misal

Yapılandırma Sözdizimini daha iyi anlamak için aşağıdaki örneği inceleyin -

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Sonuç

Sonucu doğrulayın.