در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
نمونه سوم : نمودار ستونی افقی Stack یا پشت سر هم
با استفاده از این نمونه میتونین نمودارهایی رسم کنید که بجای اینکه جدا از هم نمایش داده بشن، پشت سر هم و در ادامه هم نمایش داده بشن. به این نوع نمودارها Stack میگن که قبلا هم نمونه هایی از اونا رو براتون قرار دادیم. همونطور که قبلا گفتیم دو حالت برای Stack شدن نمودارها وجود داره که شامل normal و percent هست. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<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: 'bar'
};
var title = {
text: 'Historic World Population by Region'
};
var subtitle = {
text: 'Source: Wikipedia.org'
};
var xAxis = {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
};
var yAxis = {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
};
var tooltip = {
valueSuffix: ' millions'
};
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
};
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series = [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>
میبینید که کدی بصورت زیر رو قرار دادیم:
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
};
بیشتر کدها همانند قبل هستند ولی کد بالا یک قطعه کد رو اضافه کرده است و اون هم ویژگی Stacking درون series هست. میبینید که مقدار این ویژگی رو برابر با normal قرار داده و با اینکار این نمودار بصورت stack و پشت سرهم نمایش داده میشه. خروجی بصورت زیر خواهد بود:
اگر بجای normal از مقدار percent استفاده کنیم، نمودار کشیده میشه و کل ناحیه رو میگیره و هر کدوم به نسبت درصد مورد نظرشون رو اشغال میکنن و کاربری که نمودار رو میبینه درک بهتری از نمودار داره. کدهاش بصورت زیر میشه:
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'percent'
}
};
میبینید که در بالا از percent استفاده کردیم. خروجیش بصورت زیر هست:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !