در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
نمونه هفتم : نمودار سطحی بصورت Spline
با استفاده از این نمونه میتونین نمودارهایی رسم کنید که خطهایی که نقاز رو به هم وصل میکنن بصورت منحنی و نرم رسم بشن و نه بصورت خط راست و شکسته. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://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 chart = {
type: 'areaspline'
};
var title = {
text: 'Average fruit consumption during one week'
};
var subtitle = {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
};
var xAxis = {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
};
var yAxis = {
title: {
text: 'Fruit units'
}
};
var tooltip = {
shared: true,
valueSuffix: ' units'
};
var credits = {
enabled: false
}
var plotOptions = {
areaspline: {
fillOpacity: 0.5
}
};
var series = [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
میبینید که کدی بصورت زیر رو قرار دادیم:
var chart = {
type: 'areaspline'
};
میبینید که نوع یا type رو برابر با areasplie قرار دادیم. با اینکار نمودار سطحی بصورت spline رسم میشه و خروجی اون بصورت زیر خواهد بود:
میبینید که خطوط بصورت Smooth یا نرم کشیده شده اند.
نمونه هشتم : نمودار سطحی با بازه داده یا range
در این نمونه مشخایم نمودارهایی رو بررسی کنیم که داده‌های اون بصورت بازه ای و range هستن و مثلا از یک عدد تا عدد دیگری رو پوشش میدن و همه اون اعداد بین میتونه صادق باشه. مثلا در اینجا نمودار تغییرات دمایی در طول روزهای مختلف رو رسم میکنیم و میبینیم. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'arearange',
zoomType: 'x'
};
var title = {
text: 'Temperature variation by day'
};
var xAxis = {
type: 'datetime'
};
var yAxis = {
title: {
text: null
}
};
var tooltip = {
shared: true,
crosshairs: true,
valueSuffix: '\xB0C'
};
var legend = {
enabled: false
}
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
var series = [{
name: 'Temperatures',
data: data
}];
json.series = series;
$('#container').highcharts(json);
});
});
</script>
</body>
</html>
میبینید که کدی بصورت زیر رو قرار دادیم:
var chart = {
type: 'arearange',
zoomType: 'x'
};
میبینید که در ابتدا نوع این نمودار arearange قرار داده شده و مشخص میکنه که میخام از نمودار بازه ای استفاده کنیم. بعد از اون همونطور که در جلسات قبل توضیح داده شد در اینجا مقدار ویژگی zoomType رو برابر با x قرار داده و با اینکار میتونین این نمودار رو در جهت محور x بزرگنمایی و زوم کنید. داده‌ها رو از یک فایل JSON که در سرور دیگری قرار داده شده با استفاده از Ajax لود میکنیم و از اطلاعات موجود در اون در نمودار استفاده میکنیم. بصورت زیر:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
var series = [{
name: 'Temperatures',
data: data
}];
json.series = series;
$('#container').highcharts(json);
});
این نمونه رو هم در قسمتهای قبل توضیح دادیم و چیز خاصی نداره. خروجی این نمودار بصورت زیر خواهد بود:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
ی دنیا ممنون و متشکر
خوشحالم ک تونستم جواب سوالمو اینجا پیدا کنم
موفق باشید
منم خوشحالم که بدردتون خورده
موفق باشید
با سلام و تشکر بابت این سری آموزش گاربردی…
آموزش خواندن نمودار هار از داده های دیتابیس هم دارید؟
سلام
همونطور که دیدید در این آموزش با استفاده از Ajax و متد getJSON یک فایل json رو گرفتیم و اطلاعات اون رو در نمودار نمایش دادیم
همینکارو برای دیتابیس هم میشه کرد و اطلاعات برگشتی از سرور رو در نمودار نمایش داد
در آدرس زیر همچین کاری رو انجام داده و میتونین از اون استفاده کنید
http://www.highcharts.com/docs/working-with-data/data-from-a-database
موفق باشید
ممنون از سایت خوبتون
موفق باشید