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.