در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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
موفق باشید
ممنون از سایت خوبتون
موفق باشید