Highcharts - कॉन्फ़िगरेशन सिंटैक्स
इस अध्याय में, हम Highcharts API का उपयोग करके एक चार्ट बनाने के लिए आवश्यक कॉन्फ़िगरेशन का प्रदर्शन करेंगे।
स्टेप 1: HTML पेज बनाएं
JQuery और Highcharts जावास्क्रिप्ट पुस्तकालय के साथ एक HTML पृष्ठ बनाएँ।
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>यहां ही container div का उपयोग Highcharts लाइब्रेरी का उपयोग करके तैयार किए गए चार्ट को करने के लिए किया जाता है।
चरण 2: विन्यास बनाएं
Highcharts पुस्तकालय json सिंटैक्स का उपयोग करके बहुत सरल कॉन्फ़िगरेशन का उपयोग करता है।
$('#container').highcharts(json);यहाँ json json डेटा और कॉन्फ़िगरेशन का प्रतिनिधित्व करता है जो Highcharts लाइब्रेरी हाईचर्ट्स () पद्धति का उपयोग करके कंटेनर div के भीतर एक चार्ट बनाने के लिए उपयोग करता है। अब, हम आवश्यक जेट स्ट्रिंग बनाने के लिए विभिन्न मापदंडों को कॉन्फ़िगर करेंगे।
शीर्षक
चार्ट का शीर्षक कॉन्फ़िगर करें।
var title = {
text: 'Monthly Average Temperature'
};उपशीर्षक
चार्ट के उपशीर्षक को कॉन्फ़िगर करें।
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
एक्स-एक्सिस पर प्रदर्शित होने के लिए टिकर को कॉन्फ़िगर करें।
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
वाई-एक्सिस पर प्रदर्शित होने के लिए शीर्षक, प्लॉट लाइनों को कॉन्फ़िगर करें।
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};टूलटिप
टूलटिप को कॉन्फ़िगर करें। मूल्य (y- अक्ष) के बाद जोड़ा जाने वाला प्रत्यय लगाएं।
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]
}
];चरण 3: json डेटा बनाएँ
सभी कॉन्फ़िगरेशन को मिलाएं।
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;चरण 4: चार्ट को ड्रा करें
$('#container').highcharts(json);उदाहरण
कॉन्फ़िगरेशन सिंटैक्स को और समझने के लिए निम्नलिखित उदाहरण पर विचार करें -
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>परिणाम
परिणाम सत्यापित करें।