วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeehighcharts export กราฟ chart
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ highcharts export กราฟ chart
ดูแล้ว 7,127 ครั้ง
ไปที่
Copy
เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts
เพื่อจัดรูปแบบของ กราฟให้ดูง่าย โดยเป็นการแยกในส่วนของ option
มาไว้อีกไฟล์หนึ่ง
โค้ดของไฟล์ตัวอย่างจากบทความก่อนหน้า
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts</title> </head> <body> <div style="width:80%;margin:auto;"> <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { $('#hc_container').highcharts({ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'London', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'Berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] }); }); </script> </body> </html>
จะเห็นว่าในส่วนของการกำหนด option ต่างๆ จะมีการกำหนดยาวมาก
วิธีแก้คือ
1. สร้างไฟล์ charts.js และกำหนด option บางส่วนดังนี้
var chartsOption={ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } } }
2. ที่ไฟล์หลัก กำหนดเป็นดังนี้ highcharts.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts</title> </head> <body> <div style="width:80%;margin:auto;"> <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script src="js/charts.js"></script> <script type="text/javascript"> $(function () { $('#hc_container').highcharts( $.extend(chartsOption,{ series: [{ name: 'Tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'London', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'Berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] })); }); </script> </body> </html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
08 Jun2015แนะนำ highcharts สร้างกราฟง่ายๆ รองรับการ export อ่าน 10,028
Highcharts เป็นระบบกราฟ API ที่มีความยืดหยุ่นและใช้งานง่าย สามารถสร้างกรา
-
กำลังอ่านเนื้อหานี้อยู่09 Jun2015วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น อ่าน 7,127
เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts เพื่อจัดรูป
-
10 Jun2015ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น อ่าน 14,416
พิเศษ เฉพาะสมาชิก เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล มาแสดงในรูปแบบกราฟด้
-
12 Jun2015เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts อ่าน 6,377
พิเศษ เฉพาะสมาชิก จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง เป็น
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ