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

08 June 2015 เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee

highcharts กราฟ chart export

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

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="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//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>

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

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

กำลังอ่านเนื้อหานี้อยู่

08 Jun
2015

แนะนำ highcharts สร้างกราฟง่ายๆ รองรับการ export อ่าน 8,754
Highcharts เป็นระบบกราฟ API ที่มีความยืดหยุ่นและใช้งานง่าย สามารถสร้างกรา
09 Jun
2015

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

ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น อ่าน 12,918
พิเศษ เฉพาะสมาชิก เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล มาแสดงในรูปแบบกราฟด้
12 Jun
2015

เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts อ่าน 5,600
พิเศษ เฉพาะสมาชิก จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง เป็น

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน