การสร้าง Highcharts ฺฺBubbleโดยใช้ฟังก์ชันใน JavaScript

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

theoneozz
PHP Super Member
PHP Super Member
โพสต์: 244
ลงทะเบียนเมื่อ: 07/01/2019 12:19 pm

การสร้าง Highcharts ฺฺBubbleโดยใช้ฟังก์ชันใน JavaScript

โพสต์โดย theoneozz » 11/01/2019 4:58 pm

ในบทความนี้เราจะมาเรียนรู้เกี่ยวกับการสร้างแผนภูมิฟองสบู่เเละเมื่อเลือกกดที่ฟองสบู่ลูกใด ลูกหนึ่ง เมื่อกดเเล้วจะเป็นการขยายเพื่อแสดงผลลัพธ์

องค์ประกอบของแผนภูมิประกอบด้วย
การกำหนดค่าแผนภูมิ

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

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

คุณสมบัติของ Chart.zoom.Type การกำหนดค่าแผนภูมิเพื่อขยายโดยการลากเมาส์เพื่อขยาย แกน X หรือ แกน Y

โดยด้านในผู้ใช้งานสามารถกำหนดตัวเลขที่ต้องการกำหนดให้ฟองสบู่ตั้งต้น เเละใช้ฟังก์ชั่น JavaScriptในการทำงาน ดังตัวอย่างโค้ด

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

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

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var chart = {
      type: 'bubble',
      zoomType: 'xy'
   };
   var title = {
      text: 'Highcharts Bubbles'   
   };   
   var series= [{
            data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
        }, {
            data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
        }, {
            data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
      }
   ];     
     
   var json = {};   
   json.chart = chart;
   json.title = title;     
   json.series = series;   
   $('#container').highcharts(json);
 
});
</script>
</body>
</html>


ผลลัพธ์ที่ 1 เมื่อทดสอบระบบ

5 (2).jpg
5 (2).jpg (25.36 KiB) เปิดดู 477 ครั้ง


ผลลัพธ์ที่ 2 เมื่อทำการนำเมาส์ไปชี้ที่ฟองสบู่

7.JPG
7.JPG (29.29 KiB) เปิดดู 477 ครั้ง


ผลลัพธ์ที่ 3 เมื่อทำการกดเข้าไป

6.JPG
6.JPG (25.94 KiB) เปิดดู 477 ครั้ง


สรุป การสร้างแผนภูมิฟองสบู่สโดยใช้ JavaScript ช่วยให้เราสามารถ ตกเเต่งหน้าเว็บของเราได้สวยงามและยังเป็นระเบียบอีกด้วย
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax

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

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

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

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