ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

phpBB เป็นโปรแกรมระบบกระดานสนทนาบนอินเทอร์เน็ตแบบโอเพนซอร์ส ทำงานด้วยภาษาพีเอชพี ควบคู่กับระบบฐานข้อมูล ในส่วนของ  AJAXการทำงานระหว่าง server กับ Client มากขึ้น ajax  เป็นตัวเชื่อมเเละนำ resource มาเเสดงผลโดยไม่ต้อง รีเฟตหน้า สำหรับการสร้าง charts  โดยใช้ไลบรารี Highcharts มาพร้อมกับเครื่องมือทั้งหมดเพื่อสร้างการแสดงข้อมูลเป็นภาพข้อมูลที่เชื่อถือได้และปลอดภัย ไลบรารีการสร้างแผนภูมิทั้งหมดของเราสร้างขึ้นบน JavaScript และ TypeScript ทำงานร่วมกับฐานข้อมูลส่วนหลังหรือสแต็กเซิร์ฟเวอร์ เรานำเสนอ wrapper สำหรับภาษาโปรแกรมยอดนิยม (.Net, PHP, Python, R, Java) รวมถึง  iOS  และ  Androidและเฟรมเวิร์ก เช่น Angular, Vue และ React

โดย code ต้นที่มานำเสนอประกอบด้วย 

  • ไฟล์ JS 
  • ไฟล์ CSS
  • ไฟล์ HTML

 

ตัวอย่างไฟล์ JS มีหน้าที่ส่งข้อมูลไปยังหน้าที่เราต้องการเพื่อรับข้อมูลกลับมาในรูปแบบ object array

<script>
    $(function () {
        $.ajax({
            url: "ลิงก์ url ที่เราต้องการไปเอาข้อมูล ",
            method: "get",
            dataType: "json",
            data: {
                query: date_range,
            },
            success: function (data) {

              //data ที่ได้กลับมาจะเป็นรูปแบบข้อมูลที่ใช้ จะเป็น  [object Array]
                Highcharts.chart('chart_member', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: 'ชื่อของกราฟ จะแสดงส่วนหัว'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        title: {
                            text: 'ชื่อของส่วนแกน Y'
                        }
                    },
                    xAxis: {
                        title: {
                            text: 'ชื่อของส่วนแกน X'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },
                    series: [{
                        type: 'area',
                        name: '{L_ACP_MEMBER_TITLE}',
                        data: data,//[[1646286206000,1],[1646398781000,1],[1646734272000,7],[1646780400000,1],[1646899755000,1],[1647558000000,2],[1648615609000,2]],
                        //รูปแบบข้อมูลที่ใช้ จะเป็น  [object Array]  ซึ่งจะเก็บ วันที่รูปแบบ unixtimestamp และ จำนวนไว้ เช่น [1646734272000,7]  
                    },],



                });



            }
        });

    });
</script>

ไฟล์ HTML มีหน้าที่เรียก JS จาก เว็บ https://www.highcharts.com/ 

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">

  </p>
</figure>

ไฟล์ CSS มีหน้าที่ตกแต่ง charts 

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

ตัวอย่างภาพการแสดงผลลัพธ์

การแสดงผล
การแสดงผล จากการรันโปรแกรม

สรุป จากบทความข้างต้นบอกถึงไฟล์ที่เกี่ยวข้องในการเขียน charts  โดยสิ่งที่ต้องมี คือ ไลบารี highcharts และต้องรู้รูปแบบข้อมูลที่จะนำไปใช้งานใน highcharts โดยต้องมีความเข้าใจ ในภาษา JavaScript เพื่อจัดรูปแบบข้อมูลหรือใช้สำหรับการใช้งาน  AJAX โดยสำหรับวิธ๊ใช้งานใน phpBB ซึ่งข้อควรระวังในการจัดการข้อมูล รูปแบบ object array ซึ่งจะเก็บ วันที่รูปแบบ unixtimestamp และ จำนวนไว้ เช่น [1646734272000,7]  

อ้างอิง

ไลบรารี  highchartsคือ ,[ออนไลน์],
https://www.highcharts.com/demo/line-time-series

phpBB คือ อะไร,[ออนไลน์],
https://www.mindphp.com/บทความ/24-cms-php/157-phpbb-คืออะไร.html

แนะนำการใช้งาน ajax ,[ออนไลน์],
https://www.mindphp.com/บทเรียนออนไลน์/สอน-ajax/3157-แนะนำการใช้งาน-ajax-เบื้องต้น-ในการพัฒนา-web-programming.html

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามการใช้ event ในการแก้ไข username เป็นรหัสอื่นในส่วนแจ้งเตือนต้องทำอย่างไร
โดย eange08 พ 05 ต.ค. 2022 6:44 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
4
พ 05 ต.ค. 2022 6:44 pm โดย eange08
สอบถามการสร้าง templates ใน joomla
โดย Thanapoom1514 พ 05 ต.ค. 2022 4:37 pm บอร์ด Joomla Development
1
14
พ 05 ต.ค. 2022 5:30 pm โดย tsukasaz
สอบถามการทำ Web Storage ใน joomla
โดย Thanapoom1514 พ 05 ต.ค. 2022 9:17 am บอร์ด Joomla Development
1
8
พ 05 ต.ค. 2022 2:48 pm โดย tsukasaz
สอบถามเรื่องการแก้ไข HTML หน้าเว็บ
โดย flook จ 03 ต.ค. 2022 12:32 pm บอร์ด Programming - PHP
4
67
อ 04 ต.ค. 2022 10:47 am โดย flook
สอนถามทำ index ของตารางต้องทำอย่างไร [phpBB]
โดย eange08 จ 03 ต.ค. 2022 4:02 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
55
อ 04 ต.ค. 2022 8:04 pm โดย eange08
สอบถาม SQL Explain มีบอกว่า query อยู่ที่ไฟล์ไหน
โดย eange08 จ 03 ต.ค. 2022 1:04 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
27
จ 03 ต.ค. 2022 1:04 pm โดย eange08
สอบถามการเช็คการตั้งค่าในหน้า configuration ของ mooziicart
โดย Thanapoom1514 จ 03 ต.ค. 2022 11:31 am บอร์ด Joomla Development
1
32
จ 03 ต.ค. 2022 11:35 am โดย tsukasaz
สอบถามเรื่อง HTML entities ครับ
โดย flook จ 03 ต.ค. 2022 10:05 am บอร์ด Programming - PHP
2
38
จ 03 ต.ค. 2022 11:21 am โดย flook