در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
نمونه نهم : نمودار سری polygon یا چند ضلعی
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script language="JavaScript">
$(function() {
$('#container').highcharts({
title: {
text: 'Height vs Weight'
},
subtitle: {
text: 'Polygon series in Highcharts'
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'Target',
type: 'polygon',
data: [
[153, 42],
[149, 46],
[149, 55],
[152, 60],
[159, 70],
[170, 77],
[180, 70],
[180, 60],
[173, 52],
[166, 45]
],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}, {
name: 'Observations',
type: 'scatter',
color: Highcharts.getOptions().colors[1],
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8], [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0], [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8], [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3], [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3], [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3], [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0], [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7], [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5], [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2], [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8], [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9], [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2], [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4], [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4], [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2], [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0], [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0], [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4], [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4], [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5], [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5], [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2], [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2], [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3], [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5], [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4], [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6], [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8], [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1], [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5], [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2], [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6], [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0], [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0], [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9], [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1], [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4], [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7], [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5], [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8], [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0], [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9], [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6], [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8], [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3] ]
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
});
});
</script>
</body>
</html>
خروجی:
نمونه دهم : نمودار General drawing یا طراحی کلی
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
<script language="JavaScript">
$(function() {
$('#container').highcharts({
chart: {
backgroundColor: 'white',
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
// Separator, client from service
ren.path(['M', 120, 40, 'L', 120, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Separator, CLI from service
ren.path(['M', 420, 40, 'L', 420, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Headers
ren.label('Web client', 20, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Web service / CLI', 220, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Command line client', 440, 40)
.css({
fontWeight: 'bold'
})
.add();
// SaaS client label
ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
.attr({
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white'
})
.add()
.shadow(true);
// Arrow from SaaS client to Phantom JS
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.translate(95, 95)
.add();
ren.label('POST options in JSON', 90, 75)
.css({
fontSize: '10px',
color: colors[3]
})
.add();
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
// Arrow from Phantom JS to Batik
ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('SVG', 255, 120)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
ren.label('Batik', 210, 200)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
// Arrow from Batik to SaaS client
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135
])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('Rasterized image', 100, 110)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
// Browser label
ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
.attr({
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Browser to Batik
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 205)
.add();
ren.label('POST SVG', 110, 185)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Arrow from Batik to Browser
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 215)
.add();
ren.label('Rasterized image', 100, 215)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Script label
ren.label('Script', 450, 82)
.attr({
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Script to PhantomJS
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 90)
.add();
ren.label('Command', 340, 70)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
// Arrow from PhantomJS to Script
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 100)
.add();
ren.label('Rasterized image', 330, 100)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
}
}
},
title: {
text: 'Highcharts export server overview',
style: {
color: 'black'
}
}
});
});
</script>
</body>
</html>
خروجی:
همونطور که دیدین 10 نمودار دیگه رو هم خدمتتون معرفی کردیم و با مشاهده اونا باید به قدرت Highcharts پی برده باشید. Highchart قابلیتهای زیاد دیگه ای هم داره که خودتون میتونین اونا رو چک کنید. همچنین Highchart پلاگینها و تمهای مختلفی داره که میتونین اونا رو در این صفحه مشاهده کنید. همچنین در اون صفحه راهنمایی شده که چطور یک پلاگین یا قالب جدید رو خودمون درست کنیم و با دیگران به اشتراک بزاریم.
امیدوارم که از این سری آموزشی راضی بوده و لذت برده باشید.
موفق و پیروز باشید
یا علی
سلام واقعا اعالی بود من همیشه روی این نمودار ها کراش داشتم میخواستم ببینم دقیقا چطور کار میکنن-دستت در نکنه
سلام. خوشحالیم که این آموزش براتون مفید بوده 🙂
با سلام و خسته نباشید
مطالب جالب و جذابی بودند / تشکر می کنم در ضمن آیا کتابخانه خاصی برای کار با جداول هم وجود دارند به مانند نمودارها
درود
برای ساخت جداول در html میتونید از خود تگ table استفاده کنید. اما برای کاربردهای بیشتر و کاربرپسند بودن کتابخانههایی هم وجود داره که یکی از اونا datatables هست.
قربان عرض ادب،
سپاسگزارم بابت مطلب آموزشی و چه خوب و ساده مطلب رو در چندین جلسه ارائه دادید تشکر می کنم ، فقط اگر امکان داره فایل pdf کل دوره رو هم قرار بدید
ممنون از شما
سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود
با عرض سلام و خسته نباشید
وظیفه خودم میدونم که تشکر کنم از نویسنده مقالات فوق و مجموعه سایت سون لرن بابت ارائه مطالب آموزنده و مفیدی که اگر بی نظیر نباشند بطور حتم کم نظیر و فوق العاده ارزشمند هستند ، برای همه شما عزیزان آرزوی سلامتی و موفقیت دارم .
سلام
با تشکر از شما
خوشحالیم که تونستیم برای شما کاری رو انجام بدیم
موفق و پیروز باشید