تخفیف ویژه

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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 37 دقیقه
۰۸ تیر ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. highcharts

در این جلسه و جلسات بعدی 10 نمونه دیگه از نمودارهایی که میشه با استفاده از 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="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; max-width: 400px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(function() {

        $('#container').highcharts({

            chart: {
                polar: true
            },

            title: {
                text: 'Highcharts Polar Chart'
            },

            pane: {
                startAngle: 0,
                endAngle: 360
            },

            xAxis: {
                tickInterval: 45,
                min: 0,
                max: 360,
                labels: {
                    formatter: function() {
                        return this.value + '°';
                    }
                }
            },

            yAxis: {
                min: 0
            },

            plotOptions: {
                series: {
                    pointStart: 0,
                    pointInterval: 45
                },
                column: {
                    pointPadding: 0,
                    groupPadding: 0
                }
            },

            series: [{
                type: 'column',
                name: 'Column',
                data: [8, 7, 6, 5, 4, 3, 2, 1],
                pointPlacement: 'between'
            }, {
                type: 'line',
                name: 'Line',
                data: [1, 2, 3, 4, 5, 6, 7, 8]
            }, {
                type: 'area',
                name: 'Area',
                data: [1, 8, 2, 7, 3, 6, 4, 5]
            }]
        });
    });
    </script>
</body>

</html>

در این نمونه‌ها فایل exporting.js هم اضافه شده که با استفاده از این فایل یک آیکون در سمت راست و بالای نمودار ظاهر میشه و قابلیت دانلود نمودار در فرمتهای مختلف وجود داره.

خروجی:polar chart

نمونه دوم : نمودار تار عنکبوتی

<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: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(function() {

        $('#container').highcharts({

            chart: {
                polar: true,
                type: 'line'
            },

            title: {
                text: 'Budget vs spending',
                x: -80
            },

            pane: {
                size: '80%'
            },

            xAxis: {
                categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                    'Information Technology', 'Administration'
                ],
                tickmarkPlacement: 'on',
                lineWidth: 0
            },

            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0
            },

            tooltip: {
                shared: true,
                pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
            },

            legend: {
                align: 'right',
                verticalAlign: 'top',
                y: 70,
                layout: 'vertical'
            },

            series: [{
                name: 'Allocated Budget',
                data: [43000, 19000, 60000, 35000, 17000, 10000],
                pointPlacement: 'on'
            }, {
                name: 'Actual Spending',
                data: [50000, 39000, 42000, 31000, 26000, 14000],
                pointPlacement: 'on'
            }]

        });
    });
    </script>
</body>

</html>

خروجی:spider web chart

نمونه سوم : نمودار وضع هوا و میزان وزش باد

<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/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>

<body>
    <div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    <div style="display:none">
        <!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
        <table id="freq" border="0" cellspacing="0" cellpadding="0">
            <tr nowrap bgcolor="#CCCCFF">
                <th colspan="9" class="hdr">Table of Frequencies (percent)</th>
            </tr>
            <tr nowrap bgcolor="#CCCCFF">
                <th class="freq">Direction</th>
                <th class="freq">&lt; 0.5 m/s</th>
                <th class="freq">0.5-2 m/s</th>
                <th class="freq">2-4 m/s</th>
                <th class="freq">4-6 m/s</th>
                <th class="freq">6-8 m/s</th>
                <th class="freq">8-10 m/s</th>
                <th class="freq">&gt; 10 m/s</th>
                <th class="freq">Total</th>
            </tr>
            <tr nowrap>
                <td class="dir">N</td>
                <td class="data">1.81</td>
                <td class="data">1.78</td>
                <td class="data">0.16</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">3.75</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">NNE</td>
                <td class="data">0.62</td>
                <td class="data">1.09</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">1.71</td>
            </tr>
            <tr nowrap>
                <td class="dir">NE</td>
                <td class="data">0.82</td>
                <td class="data">0.82</td>
                <td class="data">0.07</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">1.71</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">ENE</td>
                <td class="data">0.59</td>
                <td class="data">1.22</td>
                <td class="data">0.07</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">1.88</td>
            </tr>
            <tr nowrap>
                <td class="dir">E</td>
                <td class="data">0.62</td>
                <td class="data">2.20</td>
                <td class="data">0.49</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">3.32</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">ESE</td>
                <td class="data">1.22</td>
                <td class="data">2.01</td>
                <td class="data">1.55</td>
                <td class="data">0.30</td>
                <td class="data">0.13</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">5.20</td>
            </tr>
            <tr nowrap>
                <td class="dir">SE</td>
                <td class="data">1.61</td>
                <td class="data">3.06</td>
                <td class="data">2.37</td>
                <td class="data">2.14</td>
                <td class="data">1.74</td>
                <td class="data">0.39</td>
                <td class="data">0.13</td>
                <td class="data">11.45</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">SSE</td>
                <td class="data">2.04</td>
                <td class="data">3.42</td>
                <td class="data">1.97</td>
                <td class="data">0.86</td>
                <td class="data">0.53</td>
                <td class="data">0.49</td>
                <td class="data">0.00</td>
                <td class="data">9.31</td>
            </tr>
            <tr nowrap>
                <td class="dir">S</td>
                <td class="data">2.66</td>
                <td class="data">4.74</td>
                <td class="data">0.43</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">7.83</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">SSW</td>
                <td class="data">2.96</td>
                <td class="data">4.14</td>
                <td class="data">0.26</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">7.37</td>
            </tr>
            <tr nowrap>
                <td class="dir">SW</td>
                <td class="data">2.53</td>
                <td class="data">4.01</td>
                <td class="data">1.22</td>
                <td class="data">0.49</td>
                <td class="data">0.13</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">8.39</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">WSW</td>
                <td class="data">1.97</td>
                <td class="data">2.66</td>
                <td class="data">1.97</td>
                <td class="data">0.79</td>
                <td class="data">0.30</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">7.70</td>
            </tr>
            <tr nowrap>
                <td class="dir">W</td>
                <td class="data">1.64</td>
                <td class="data">1.71</td>
                <td class="data">0.92</td>
                <td class="data">1.45</td>
                <td class="data">0.26</td>
                <td class="data">0.10</td>
                <td class="data">0.00</td>
                <td class="data">6.09</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">WNW</td>
                <td class="data">1.32</td>
                <td class="data">2.40</td>
                <td class="data">0.99</td>
                <td class="data">1.61</td>
                <td class="data">0.33</td>
                <td class="data">0.00</td>
                <td class="data">0.00</td>
                <td class="data">6.64</td>
            </tr>
            <tr nowrap>
                <td class="dir">NW</td>
                <td class="data">1.58</td>
                <td class="data">4.28</td>
                <td class="data">1.28</td>
                <td class="data">0.76</td>
                <td class="data">0.66</td>
                <td class="data">0.69</td>
                <td class="data">0.03</td>
                <td class="data">9.28</td>
            </tr>
            <tr nowrap bgcolor="#DDDDDD">
                <td class="dir">NNW</td>
                <td class="data">1.51</td>
                <td class="data">5.00</td>
                <td class="data">1.32</td>
                <td class="data">0.13</td>
                <td class="data">0.23</td>
                <td class="data">0.13</td>
                <td class="data">0.07</td>
                <td class="data">8.39</td>
            </tr>
            <tr nowrap>
                <td class="totals">Total</td>
                <td class="totals">25.53</td>
                <td class="totals">44.54</td>
                <td class="totals">15.07</td>
                <td class="totals">8.52</td>
                <td class="totals">4.31</td>
                <td class="totals">1.81</td>
                <td class="totals">0.23</td>
                <td class="totals">&nbsp;</td>
            </tr>
        </table>
    </div>
    <script language="JavaScript">
    $(function() {

        // Parse the data from an inline table using the Highcharts Data plugin
        $('#container').highcharts({
            data: {
                table: 'freq',
                startRow: 1,
                endRow: 17,
                endColumn: 7
            },

            chart: {
                polar: true,
                type: 'column'
            },

            title: {
                text: 'Wind rose for South Shore Met Station, Oregon'
            },

            subtitle: {
                text: 'Source: or.water.usgs.gov'
            },

            pane: {
                size: '85%'
            },

            legend: {
                align: 'right',
                verticalAlign: 'top',
                y: 100,
                layout: 'vertical'
            },

            xAxis: {
                tickmarkPlacement: 'on'
            },

            yAxis: {
                min: 0,
                endOnTick: false,
                showLastLabel: true,
                title: {
                    text: 'Frequency (%)'
                },
                labels: {
                    formatter: function() {
                        return this.value + '%';
                    }
                },
                reversedStacks: false
            },

            tooltip: {
                valueSuffix: '%'
            },

            plotOptions: {
                series: {
                    stacking: 'normal',
                    shadow: false,
                    groupPadding: 0,
                    pointPlacement: 'on'
                }
            }
        });
    });
    </script>
</body>

</html>

خروجی:wind rose chart

نمونه چهارم : نمودار جعبه

<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.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="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
    <script language="JavaScript">
    $(function() {
        $('#container').highcharts({

            chart: {
                type: 'boxplot'
            },

            title: {
                text: 'Highcharts Box Plot Example'
            },

            legend: {
                enabled: false
            },

            xAxis: {
                categories: ['1', '2', '3', '4', '5'],
                title: {
                    text: 'Experiment No.'
                }
            },

            yAxis: {
                title: {
                    text: 'Observations'
                },
                plotLines: [{
                    value: 932,
                    color: 'red',
                    width: 1,
                    label: {
                        text: 'Theoretical mean: 932',
                        align: 'center',
                        style: {
                            color: 'gray'
                        }
                    }
                }]
            },

            series: [{
                name: 'Observations',
                data: [
                    [760, 801, 848, 895, 965],
                    [733, 853, 939, 980, 1080],
                    [714, 762, 817, 870, 918],
                    [724, 802, 806, 871, 950],
                    [834, 836, 864, 882, 910]
                ],
                tooltip: {
                    headerFormat: '<em>Experiment No {point.key}</em><br/>'
                }
            }, {
                name: 'Outlier',
                color: Highcharts.getOptions().colors[0],
                type: 'scatter',
                data: [ // x, y positions where 0 is the first category
                    [0, 644],
                    [4, 718],
                    [4, 951],
                    [4, 969]
                ],
                marker: {
                    fillColor: 'white',
                    lineWidth: 1,
                    lineColor: Highcharts.getOptions().colors[0]
                },
                tooltip: {
                    pointFormat: 'Observation: {point.y}'
                }
            }]

        });
    });
    </script>
</body>

</html>

خروجی:box plot chart

امیدوارم از این مطلب خوشتون اومده باشه.

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

یا علی

Source

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

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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