วิธีการสร้างกราฟจากข้อมูลใน Component ด้วย Highcharts แบบง่าย

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 7498
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

วิธีการสร้างกราฟจากข้อมูลใน Component ด้วย Highcharts แบบง่าย

โพสต์โดย tsukasaz » 28/02/2018 2:01 pm

รูปภาพ

วิธีการสร้างกราฟจากข้อมูลใน Component ด้วย Highcharts

:idea: สามารถอ่านบทความ สร้างกราฟ ด้วย Highcharts Jquery Javascript Graph เพื่อทำความรู้จักก่อน


:!: สิ่งที่ต้องเตรียม
- Component ใน Joomla ที่มีข้อมูลพร้อมดึงมาแสดง
- ตัว Highcharts เวอร์ชั่นล่าสุด ดาวน์โหลดได้ที่ https://www.highcharts.com/download
(ในตัวอย่างนี้จะใช้เวอร์ชั่น 6.0.7)


:arrow: ขั้นตอนการสร้างกราฟ
หลังจากดาวน์โหลดเสร็จแล้ว จะได้ไฟล์ zip ซึ่งไฟล์ที่เราจะใช้แบบง่ายที่สุด ใช้แค่ 2 ไฟล์ คือ highcharts.css กับ highcharts.js
ให้เอาไปไว้ใน component ที่จะใช้งาน
ตัวอย่าง สร้างโฟลเดอร์ชื่อ assets สำหรับเก็บไฟล์ javascript css และ images เอา 2 ไฟล์นี้ ไปใส่ไว้
รูปภาพ


เรียกใช้ไฟล์ highcharts.css กับ highcharts.js ในส่วน View ที่ต้องการแสดงกราฟ
คำสั่งสำหรับเรียกไฟล์ (ถ้าจะ copy อย่าลืมแก้ไขข้อมูลให้ถูกต้องก่อน)

โค้ด: เลือกทั้งหมด

$doc = Joomla\CMS\Factory::getDocument();
$doc->addScript('ใส่ URL ของไฟล์ javascript'); // เรียกไฟล์ javascript
$doc->addStyleSheet('ใส่ URL ของไฟล์ css'); // เรียกไฟล์ css                  


ตรวจสอบว่าไฟล์ทั้ง 2 ถูกเรียกแล้ว และสามารถใช้งานได้ วิธีการเช็คกด F12 ที่เว็บเบราว์เซอร์แล้วดูแท็ป Network คลิกดู CSS กับ JS ได้
รูปภาพ


ต่อไปเตรียมข้อมูลสำหรับแสดงบนกราฟ ซึ่งข้อมูลจะใช้ดึงจากฐานข้อมูล
ตัวอย่างข้อมูล
รูปภาพ


ให้สร้าง function สำหรับดึงข้อมูลในส่วน Model และจัดข้อมูลให้อยู่ในรูปแบบที่นำไปใช้ง่ายที่สุด

โค้ด: เลือกทั้งหมด

public function getChartData()
{
    $db = $this->getDbo(); // เรียก Object สำหรับเชื่อมต่อฐานข้อมูล
    $query = $db->getQuery(true) // เรียก Object สำหรับใช้คำสั่ง SQL
        ->select('name, age') // เลือกข้อมูลที่จะใช้แสดงบนกราฟ
        ->from('#__highchart_hello'); // ตารางที่ดึงข้อมูล
    $db->setQuery($query); // ส่งคำสั่ง SQL ไปประมวลผล
    $items = $db->loadObjectList(); // ดึงข้อมูลตามคำสั่งที่ส่งไปประมวลผล ข้อมูลที่ดึงจะเป็นรูปแบบ Object หลายๆ แถว

    $arr_chart_data = array(); // ตั้งตัวแปรสำหรับเก็บข้อมูลที่จัดใหม่ เป็น array
    foreach ($items as $item) // วนลูปข้อมูลที่ได้จากฐานข้อมูล
    {
        $category = "'".$item->name."'"; // เนื่องจากชนิดของข้อมูล name เป็น String ซึ่งต้องเอาไปใช้ใน javascript จึงต้องใส่ ' (Single Quote)
        $arr_chart_data[$category] = $item->age; // กำหนด name เป็น key และ age เป็น value ของ array
    }

    return $arr_chart_data; // ส่งค่าออกไป
}


หลังจากสร้าง function ในส่วน Model เสร็จแล้ว ให้เรียกใช้ในส่วน View ไฟล์ view.html.php ตั้งตัวแปรมารับค่าที่ได้จาก function

โค้ด: เลือกทั้งหมด

$this->chart  = $this->get('ChartData'); // เรียกใช้ function ใน model ชื่อ getChartData   


และในไฟล์ default.php ให้เขียนคำสั่ง Javascript สำหรับแสดงกราฟ ซึ่งการใส่คำสั่ง Javascript ใน Component จะไม่ได้ใส่ลงไปตรงๆ
จะใช้คำสั่ง $doc->addScriptDeclaration('คำสั่ง Javascript'); (ใส่ต่อจากขั้นตอนที่สองได้เลย ย้อนกลับไปดูขั้นตอนที่สอง)

โค้ด: เลือกทั้งหมด

$doc->addScriptDeclaration("
jQuery(function($) {
    Highcharts.chart('show_highchart', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'TEST Highcharts'
        },
        subtitle: {
            text: 'Source: mindphp.com'
        },
        xAxis: {
            categories: ["
.implode(',', array_keys($this->chart))."],
        },
        yAxis: {
            title: {
                text: 'Years'
            }
        },
        series: [{name: 'Age', data: ["
.implode(',', $this->chart)."]}],
    });
});"
);


เพิ่มคำสั่ง HTML สำหรับแสดงผล

โค้ด: เลือกทั้งหมด

<div id="show_highchart"></div>


ผลที่ได้
รูปภาพ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน