آموزش رسم نمودار با Highcharts (جلسه آخر) - نمونه های دیگر - قسمت 3

دسته بندی: آموزش
زمان مطالعه: 40 دقیقه
۱۱ تیر ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. 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>

خروجی:polygon chart

نمونه دهم : نمودار 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>

خروجی:general drawing chart

همونطور که دیدین 10 نمودار دیگه رو هم خدمتتون معرفی کردیم و با مشاهده اونا باید به قدرت Highcharts پی برده باشید. Highchart قابلیتهای زیاد دیگه ای هم داره که خودتون میتونین اونا رو چک کنید. همچنین Highchart پلاگین‌ها و تمهای مختلفی داره که میتونین اونا رو در این صفحه مشاهده کنید. همچنین در اون صفحه راهنمایی شده که چطور یک پلاگین یا قالب جدید رو خودمون درست کنیم و با دیگران به اشتراک بزاریم.

امیدوارم که از این سری آموزشی راضی بوده و لذت برده باشید.

موفق و پیروز باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

حسین سلیمی

سلام واقعا اعالی بود من همیشه روی این نمودار ها کراش داشتم میخواستم ببینم دقیقا چطور کار میکنن-دستت در نکنه

نازنین کریمی مقدم

سلام. خوشحالیم که این آموزش براتون مفید بوده 🙂

نازمحمد گری

با سلام و خسته نباشید
مطالب جالب و جذابی بودند / تشکر می کنم در ضمن آیا کتابخانه خاصی برای کار با جداول هم وجود دارند به مانند نمودارها

نازنین کریمی مقدم

درود
برای ساخت جداول در html میتونید از خود تگ table استفاده کنید. اما برای کاربردهای بیشتر و کاربرپسند بودن کتابخانه‌هایی هم وجود داره که یکی از اونا datatables هست.

Karaj Alborz

قربان عرض ادب،
سپاسگزارم بابت مطلب آموزشی و چه خوب و ساده مطلب رو در چندین جلسه ارائه دادید تشکر می کنم ، فقط اگر امکان داره فایل pdf کل دوره رو هم قرار بدید
ممنون از شما

فائقه نامور

سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود

dabiry

با عرض سلام و خسته نباشید
وظیفه خودم میدونم که تشکر کنم از نویسنده مقالات فوق و مجموعه سایت سون لرن بابت ارائه مطالب آموزنده و مفیدی که اگر بی نظیر نباشند بطور حتم کم نظیر و فوق العاده ارزشمند هستند ، برای همه شما عزیزان آرزوی سلامتی و موفقیت دارم .

محمد اسفندیاری

سلام
با تشکر از شما
خوشحالیم که تونستیم برای شما کاری رو انجام بدیم
موفق و پیروز باشید