در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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-3d.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: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }; var title = { text: 'Browser market shares at a specific website, 2014' }; var tooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }; var plotOptions = { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }; var series = [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.plotOptions = plotOptions; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
در ابتدا کدی بصورت زیر قرار داده شده:
var chart = { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } };
میبینید که نوع نمودار رو برابر با دایره ای قرار دادیم و حالت سه بعدی اون رو هم فعال کردیم. زاویه چرخش اون رو هم مشخص کردیم. متغیر Series هم بصورت زیر هست:
var series = [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }];
میبینید که در ویژگی data همه دادههای مورد نظر خودمون رو قرار دادیم و یکی از اونا رو selected کردیم. خروجی بصورت زیر خواهد بود:
نمونه پنجم : نمودار دایره ای سه بعدی بصورت Donut
در این نمونه میخایم یک نمونه نمودار رو در اختیارتون قرار بدیم که در اون نمودارمون بصورت دایره ای و Donut و سه بعدی نمایش داده شده. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<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-3d.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: 'pie', options3d: { enabled: true, alpha: 45 } }; var title = { text: 'Contents of Highsoft\'s weekly fruit delivery' }; var subtitle = { text: '3D donut in Highcharts' }; var plotOptions = { pie: { innerSize: 100, depth: 45 } }; var series = [{ name: 'Delivered amount', data: [ ['Bananas', 8], ['Kiwi', 3], ['Mixed nuts', 1], ['Oranges', 6], ['Apples', 8], ['Pears', 4], ['Clementines', 4], ['Reddish (bag)', 1], ['Grapes (bunch)', 1] ] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.plotOptions = plotOptions; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
در ابتدا کدی بصورت زیر قرار داده شده:
var chart = { type: 'pie', options3d: { enabled: true, alpha: 45 } };
میبینید که نوع نمودار رو برابر با دایره ای قرار دادیم و حالت سه بعدی اون رو هم فعال کردیم. زاویه چرخش اون رو هم مشخص کردیم. متغیر plotOption هم بصورت زیر هست:
var plotOptions = { pie: { innerSize: 100, depth: 45 } };
میبینید که درون ویژگی pie، ویژگی innerSize رو برابر با 100 قرار دادیم. با اینکار شعاع درونی رو برابر با 100 قرار دادیم و باعث میشه که شکل Donut به خودش بگیره. با استفاده از ویژگی depth هم عمق این نمودار رو مشخص کردیم. خروجی بصورت زیر هست:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !