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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การสร้าง Highcharts ฺฺBubbleโดยใช้ฟังก์ชันใน JavaScript

การสร้าง 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) Viewed 2087 times
ผลลัพธ์ที่ 2 เมื่อทำการนำเมาส์ไปชี้ที่ฟองสบู่
7.JPG
7.JPG (29.29 KiB) Viewed 2087 times
ผลลัพธ์ที่ 3 เมื่อทำการกดเข้าไป
6.JPG
6.JPG (25.94 KiB) Viewed 2087 times
สรุป การสร้างแผนภูมิฟองสบู่สโดยใช้ JavaScript ช่วยให้เราสามารถ ตกเเต่งหน้าเว็บของเราได้สวยงามและยังเป็นระเบียบอีกด้วย
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax

ข้างบน