แนะนำ highcharts สร้างกราฟง่ายๆ รองรับการ export

08 June 2015 By Ninenik Narkdee

กราฟ export highcharts

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ กราฟ export highcharts

Highcharts เป็นระบบกราฟ API ที่มีความยืดหยุ่นและใช้งานง่าย

สามารถสร้างกราฟและแผนภูมิในรูปบแบบต่างๆ ได้หลากหลาย พร้อม

สามารถ export เป้นไฟล์ในรุปแบบต่างๆ ไม่ว่าจะเป็น รูป ภาพนามสกุล

jpg,png หรือ ไฟล์เอกสาร pdf หรือภาพเวกเดอร์นามสกุล svg (ไฟล์ svg

รองรับในบางบราวเซอร์)

สามารถเข้าไปดูรายละเอียดทั้งหมดได้ที่เว็บไซต์

http://www.highcharts.com/

ตัวอย่าง

โค้ดตัวอย่าง

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Highcharts</title>
</head>

<body>

<div style="width:80%;margin:auto;">

    <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    $('#hc_container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

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

เนื้อหาที่เกี่ยวข้อง

09 Jun
2015

วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น อ่าน 2,769
เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts เพื่อจัดรูป

Tags:: กราฟ export highcharts

อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

URL สำหรับอ้างอิง