در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
نمونه اول : نمودار حبابی ساده
با استفاده از این نمونه میتونین نمودارهایی رسم کنید که دادهها رو بصورت حبابی و دایره دایره نمایش میده. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<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/highcharts-more.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: 'bubble', zoomType: 'xy' }; var title = { text: 'Highcharts Bubbles' }; var series = [{ data: [ [97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31] ] }, { data: [ [25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81] ] }, { data: [ [47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82] ] }]; var json = {}; json.chart = chart; json.title = title; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
میبینید که در ابتدا کدی بصورت زیر رو قرار دادیم:
var chart = { type: 'bubble', zoomType: 'xy' };
میبینید که نوع نمودار رو برابر با bubble قرار دادیم و با این کار دادهها بصورت حبابی نمایش داده میشن. با استفاده از ویژگی zoomType هم برای نمودار قابلیت بزرگنمایی در جهتهای افقی و عمودی رو قرار دادیم.
var series = [{ data: [ [97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31] ] }, { data: [ [25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81] ] }, { data: [ [47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82] ] }];
میبینید درون متغیر Series هم دادههای مورد نظرمون رو قرار دادیم و در سه دسته کلی جا گرفتن. هر کدوم از اونا سه مقدار داره، که مقدار اول اون محل افقی و مقدار دوم محل عمودی و مقدار سوم نیز شعاع اون رو مشخص میکنه. خروجی بصورت زیر میشه:
نمونه دوم : نمودار حبابی با ظاهر سه بعدی
این نمونه تقریبا شبیه به نمونه قبلی هست، با این تفاوت که ظاهر حبابها در این نمونه به صورت سه بعدی هست و زیباتر و طبیعیتر از قبل میشه. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<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/highcharts-more.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: 'bubble', plotBorderWidth: 1, zoomType: 'xy' }; var title = { text: 'Highcharts bubbles with radial gradient fill' }; var xAxis = { gridLineWidth: 1 }; var yAxis = { startOnTick: false, endOnTick: false }; var series = [{ data: [ [9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14], [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70], [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63], [93, 23, 23], [44, 83, 22] ], marker: { fillColor: { radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, stops: [ [0, 'rgba(255,255,255,0.5)'], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')] ] } } }, { data: [ [42, 38, 20], [6, 18, 1], [1, 93, 55], [57, 2, 90], [80, 76, 22], [11, 74, 96], [88, 56, 10], [30, 47, 49], [57, 62, 98], [4, 16, 16], [46, 10, 11], [22, 87, 89], [57, 91, 82], [45, 15, 98] ], marker: { fillColor: { radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, stops: [ [0, 'rgba(255,255,255,0.5)'], [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')] ] } } }]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
تفاوتی که با نمونه قبل داره اینه که درون متغیر Series، ویژگی marker رو دستکاری کرده و برای رنگ پس زمینه اون یک گرادیان شعاعی قرار داده. بصورت زیر:
marker: { fillColor: { radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, stops: [ [0, 'rgba(255,255,255,0.5)'], [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')] ] } }
میبینید که برای هر دسته یک گرادیان قرار داده شده و طول، عرض و شعاع گرادیان رو مشخص کرده. خروجی بصورت زیر خواهد بود:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !