آموزش رسم نمودار با 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

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

جلسات دوره

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

dabiry

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

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

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

نیاز به لاگین

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