در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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')]
]
}
}
میبینید که برای هر دسته یک گرادیان قرار داده شده و طول، عرض و شعاع گرادیان رو مشخص کرده. خروجی بصورت زیر خواهد بود:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !