ทำ chart mixed ให้ข้อมูลออกมาเป็นกราฟ แต่มีปัญหาตรงกราฟไม่ขึ้นครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ทำ chart mixed ให้ข้อมูลออกมาเป็นกราฟ แต่มีปัญหาตรงกราฟไม่ขึ้นครับ

ทำ chart mixed ให้ข้อมูลออกมาเป็นกราฟ แต่มีปัญหาตรงกราฟไม่ขึ้นครับ


ทำ chart mixed ให้แสดงโชว์ข้อมูลออกมาเป็นกราฟ แต่ปัญหาตอนนี้เส้นกราฟไม่ขึ้น ต้องแก้ตรงไหนบ้างครับ
ขอบคุณครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="col-md-8">
         <canvas id="mixed-chart" width="800" height="450"></canvas>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
         <div class="form-group">
           <script>
             new Chart(document.getElementById("mixed-chart"), {
 
 
               type: 'bar',
               data: {
                 labels: [
 
                   <?php
 
                   for ($i = 1; $i <= $lastDayThisMonth; $i++) {
                     if ($i > 1) {
                       echo ',';
                     }
                     echo "'" . $i . "'";
                   } ?>
 
                 ],
                 datasets: [{
                   label: "total_prepaid",
                   type: "line",
                   borderColor: "#8e5ea2",
                   data: [
                     <?php
                     $k = [];
                     foreach ($day_total_prepaid_chart as $row) {
                       $k[($row->no_date * 1)] = $row->total_prepaid;
                     }
                     for ($j = 1; $j <= $lastDayThisMonth; $j++) {
                       if ($j > 1) {
                         echo ',';
                       }
                       echo (isset($k[$j])) ? "'" . $k[$j] . "'" : "'0'";
                     }
                     ?>
                   ],
                   fill: false
                 },/* {
                   label: "Africa",
                   type: "line",
                   borderColor: "#3e95cd",
                   data: [133, 221, 783, 2478],
                   fill: false
                 }, {
                   label: "Europe",
                   type: "bar",
                   backgroundColor: "rgba(0,0,0,0.2)",
                   data: [408, 547, 675, 734],
                 }, {
                   label: "Africa",
                   type: "bar",
                   backgroundColor: "rgba(0,0,0,0.2)",
                   backgroundColorHover: "#3e95cd",
                   data: [133, 221, 783, 2478]
                 }*/]
               },
               options: {
                 title: {
                   display: true,
                   text: 'Population growth (millions): Europe & Africa'
                 },
                 legend: {
                   display: false
                 }
               }
             });
           </script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public function get_dashboard_day_total_prepaid_chart()
  {
$sql = "SELECT MONTHNAME(airwaybills.date) as month, sum(airwaybills.total_prepaid) as total_prepaid, DATE_FORMAT(airwaybills.date, '%d') as no_date,
   date(airwaybills.date) as date, customers.shipper_name as cus_shipname, customers.consignee_name as cus_conname,airport_departures.short_name AS dep_name,
   airport_destinations.short_name as des_name, airwaybills.pieces as air_pieces,
   MONTHNAME(airwaybills.created_at) as namemonth from airwaybills
   INNER JOIN airport_departures ON airwaybills.airport_departure_id = airport_departures.id
   INNER JOIN airport_destinations ON airwaybills.airport_destination_id = airport_destinations.id
   INNER JOIN customers ON airwaybills.customer_id = customers.id
   WHERE airwaybills.customer_id = customers.id
   GROUP BY MONTHNAME(airwaybills.date),date(airwaybills.date)";  
 
   //  $query = $this->db->get();
   $query = $this->db->query($sql);
   //echo "<pre>";
   // print_r($query->result());
   // echo "</pre>";die();
  return $query->result_array();





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public function index()
  {
    $user = $this->ion_auth->user()->row();
    $user_group = $this->users_group_model->find_userId($user->user_id);
 
    // echo '<pre>',print_r($user_group,1),'</pre>';
    if ($user_group->group_id == 1) {
      $chargeable_weight_chart = $this->dashboard_model->get_dashboard_chargeable_weight_chart();
      // $day_total_prepaid_chart = $this->dashboard_model->get_dashboard_day_total_prepaid_chart();
      $total_prepaid_chart = $this->dashboard_model->get_dashboard_total_prepaid_chart();
      $pieces_chart = $this->dashboard_model->get_dashboard_pieces_chart();
      $total_chart = $this->dashboard_model->get_dashboard_total_chart();
 
    /*  $start_date     = isset($_POST['start_date']) ? $_POST['start_date'] : "";
      $end_date       = isset($_POST['end_date']) ? $_POST['end_date'] : "";
      $departure      = isset($_POST['departure']) ? $_POST['departure'] : "";
      $destination    = isset($_POST['destination']) ? $_POST['destination'] : "";*/
 
      $day_total_prepaid_chart = $this->dashboard_model->get_dashboard_day_total_prepaid_chart();
 
      $lastDayThisMonth = date("t");
 
      $this->data['day_total_prepaid_chart'] = $day_total_prepaid_chart;
      $this->data['lastDayThisMonth'] = $lastDayThisMonth;
 
      $this->data['chargeable_weight_chart'] = $chargeable_weight_chart;
      $this->data['total_prepaid_chart'] = $total_prepaid_chart;
      $this->data['pieces_chart'] = $pieces_chart;
      $this->data['total_chart'] = $total_chart;
 
      $this->data['view_name'] = 'dashboards/index';
    } else
      $this->data['view_name'] = 'dashboards/index_welcome';
 
    $this->load->view('layouts/main', $this->data);
  }


Jakkrit Saengngoenon 23-04-2021 21:03:39

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองตรวจสอบ error ผ่าน console log ดูน่าจะพอรู้สาเหตุว่าเกิดจากอะไร
ส่วนใหญ่ ถ้าใช้วิธีข้างต้น น่าจะเป็นที่ค่าของข้อมูลจาก php ถูกแปลงเป็น 
javascript object ไม่ถูกต้องหรือไม่สมบูรณ์ เช่น มีช่องว่าง หรือค่าข้อความ
ตัวอักษร หรือตัวอักขระที่ไม่ต้องการเกินมา ทำให้โค้ดทำงานไม่ถูกต้อง
แนวทาง ให้ใช้ข้อมูลทดสอบฟิกค่าตายตัว เพื่อให้สามารถแสดงกราฟได้ก่อน
ถ้ากราฟแสดงจากข้อมูลทดสอบได้ ต่อไปก็ให้ทดสอบ ใช้ข้อมูลที่ดึงมา พยายาม
ส่งมาเป็น json หรือ javascript object จะเข้ากันได้ดี 
อีกแนวทาง คือใช้ข้อมูลในรูปแบบการดึงด้วย ajax เพื่อให้ได้รูปแบบที่ต้องการมาก่อน
แล้วสร้างเป็นฟังก์ชั่น ส่งค่าข้อมูลเข้าไปสร้างกราฟอีกที ดูตัวอย่างโค้ดด้านล่าง
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<canvas id="mixed-chart" width="800" height="450"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="form-group">
<script>
  var mixedChart = new Chart(document.getElementById("mixed-chart"), {
   type: 'bar',
   data: {
       datasets: [{
           label: 'Bar Dataset',
           data: [10, 20, 30, 40],
           // this dataset is drawn below
           order: 2
       }, {
           label: 'Line Dataset',
           data: [10, 10, 10, 10],
           type: 'line',
           // this dataset is drawn on top
           order: 1
       }],
       labels: ['January', 'February', 'March', 'April']
   },
   options: {}
});
</script>
 
โค้ดทดสอบ
 
เราดึงข้อมูลออกมาเป็นตัวแปร จะได้เป็น
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var mydata = [{
         label: 'Bar Dataset',
         data: [10, 20, 30, 40],
         type:null,
         // this dataset is drawn below
         order: 2
     }, {
         label: 'Line Dataset',
         data: [10, 10, 10, 10],
         type: 'line',
         // this dataset is drawn on top
         order: 1
     }];
var mixedChart = new Chart(document.getElementById("mixed-chart"), {
   type: 'bar',
   data: {
       datasets: mydata,
       labels: ['January', 'February', 'March', 'April']
   },
   options: {}
});
 
ตัวแปร mydata เก็บรูปแบบข้อมูล object ที่เราต้องการนำไปแสดงแยกออกมา เราสามารถ
ใช้ค่านี้จาก ajax หรือจากการเรียกผ่านคำสั่ง php โดยตรงก็ได้ ซึ่งเราต้องรู้รูปแบบโครงสร้าง
ของตัวแปร array ใน php เพื่อที่จะแปลงเป็น json object ให้สอดคล้องกัน  ส่วนใหญ่แล้ว
array ใน php ก็จะเป็นลักษณะสมมาตรกัน ดังนั้นกรณีที่ข้อมูลแรกไม่มี property ที่ชื่อ type 
เราก็กำหนดค่าเข้าไป และให้มีค่าเป็น null ตามตัวอย่างด้านบน จากนั้นก็แปลงให้อยู่ในรูปแบบ
array ใน php ก็จะได้เป็น
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$mydata = array(
    array(
        "label" => "Bar Dataset",
        "data" => array(
            10,20,30,40
        ),
        "type" => NULL,
        "order" => "2"   
    ),
    array(
        "label" => "Line Dataset",
        "data" => array(
            10,10,10,10
        ),
        "type" => "line",
        "order" => "1"   
    ),   
);
 
โครงสร้างตัวแปร array ที่เราสามารถส่งค่ากลับออกมาเป็น json object ด้วยคำส่ง json_encode()  ดูตัวอย่าง
สมมติการเรียกใช้โดยตรง ด้วยคำสั่ง php ใน javascript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
$mydata = array(
    array(
        "label" => "Bar Dataset",
        "data" => array(
            10,20,30,40
        ),
        "type" => NULL,
        "order" => "2"   
    ),
    array(
        "label" => "Line Dataset",
        "data" => array(
            10,10,10,10
        ),
        "type" => "line",
        "order" => "1"   
    ),   
);
?>
  var mydata = <?=json_encode($mydata)?>;
  var mixedChart = new Chart(document.getElementById("mixed-chart"), {
     type: 'bar',
     data: {
         datasets: mydata,
         labels: ['January', 'February', 'March', 'April']
     },
     options: {}
  });
 
เราสามารถประยุกต์ใช้งาน ajax ดึงข้อมูลได้ อาจจะใช้งานผ่านคำสัง ajax ใน jquery
หรือใช้ fetch api ของ javascript ก็ได้ เช่น
 
ไฟล์ mydata.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
// ใส่ header เป็น json ไฟล์ด้วย
$mydata = array(
    array(
        "label" => "Bar Dataset",
        "data" => array(
            10,20,30,40
        ),
        "type" => NULL,
        "order" => "2"   
    ),
    array(
        "label" => "Line Dataset",
        "data" => array(
            10,10,10,10
        ),
        "type" => "line",
        "order" => "1"   
    ),   
);
echo json_encode($mydata);
?>
 
ไฟล์แสดง chart ส่วนของ javascript ใช้งานแบบ ajax
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<canvas id="mixed-chart" width="800" height="450"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="form-group">
<script>
// ฟังก์ชั่นสำหรับสร้างกราฟ
function drawchart(mydata){
  var mixedChart = new Chart(document.getElementById("mixed-chart"), {
   type: 'bar',
   data: {
       datasets: mydata,
       labels: ['January', 'February', 'March', 'April']
   },
   options: {}
});
}
// ajax ดึงข้อมูล เมื่อได้ข้อมูลมา ก็ส่งเข้าไปในฟังก์ชั่น drawchart()
fetch('http://example.com/mydata.php')
  .then(response => response.json())
  .then(data => drawchart(data));
</script>


ninenik 24-04-2021
 ความคิดเห็นที่ 2
ขอบคุณมากๆครับ


Jakkrit Saengngoenon 25-04-2021 10:06







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ