เอกสารนี้อธิบายวิธีส่งข้อมูลแผนภูมิไปยัง Google Chart API
สารบัญ
ภาพรวม
ข้อมูลสำหรับแผนภูมิเกือบทั้งหมดจะส่งโดยใช้พารามิเตอร์ chd
โดยจะต้องส่งข้อมูลดังกล่าวในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
- รูปแบบข้อความพื้นฐานคือจำนวนจุดลอยตัวแบบง่ายๆ ตั้งแต่ 0-100 รูปแบบนี้อ่านและเขียนด้วยมือได้ง่าย
- รูปแบบข้อความที่มีการปรับขนาดอัตโนมัติจะปรับขนาดแผนภูมิให้พอดีกับข้อมูลของคุณ
- รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองคล้ายกับรูปแบบข้อความพื้นฐาน แต่ช่วยให้คุณระบุช่วงที่กำหนดเองได้โดยใช้พารามิเตอร์ของ URL ที่ 2
- รูปแบบการเข้ารหัสอย่างง่ายช่วยให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-61 ได้ โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 1 ตัว การเข้ารหัสนี้จะส่งผลให้ได้สตริงข้อมูลที่สั้นที่สุดในรูปแบบข้อมูลใดๆ (หากค่าใดก็ตามมีค่ามากกว่า 9)
- รูปแบบการเข้ารหัสเพิ่มเติมช่วยให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-4095 (รวม 0-4095) โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 2 ตัว การเข้ารหัสแบบขยายเหมาะที่สุดสำหรับแผนภูมิที่มีข้อมูลจำนวนมากและช่วงข้อมูลขนาดใหญ่
ค่าข้อมูลมีการปรับขนาดให้พอดีกับรูปแบบที่ใช้ ดูคำอธิบายเกี่ยวกับวิธีจัดการข้อมูลให้พอดีกับแผนภูมิได้ในการปรับขนาดข้อมูลและการปรับขนาดแกน
เรามีข้อมูลโค้ด JavaScript สำหรับการเข้ารหัสข้อมูลให้อยู่ในรูปแบบการเข้ารหัสแบบง่ายหรือรูปแบบการเข้ารหัสเพิ่มเติม นอกจากนี้ ยังให้สมาชิกกลุ่ม Google Chart หลายคนได้ร่วมให้ข้อมูลกับคลังอื่นๆ เพื่อช่วยในการจัดรูปแบบ โดยให้ค้นหาที่เก็บถาวรดังกล่าว
รูปแบบข้อความพื้นฐาน
ข้อมูลพื้นฐานในรูปแบบข้อความช่วยให้คุณระบุค่าจุดทศนิยมตั้งแต่ 0-100 เป็นตัวเลขได้ ค่าที่ต่ำกว่า 0 จะถูกทำเครื่องหมายว่าขาดหายไป โดยค่าที่สูงกว่า 100 จะถูกตัดเหลือเพียง 100 ข้อดีของรูปแบบข้อความพื้นฐานคือค่านี้อ่านและเข้าใจได้ง่ายใน URL ขณะที่ป้ายกำกับแกนเริ่มต้นจะแสดงค่าข้อมูลอย่างถูกต้อง อย่างไรก็ตาม การจัดรูปแบบข้อความ (ไม่ว่าจะเป็นรูปแบบพื้นฐานหรือพารามิเตอร์ที่กำหนดเอง) จะทําให้เป็นสตริงข้อมูลที่ยาวที่สุดในทุกรูปแบบ
หากข้อมูลมีค่านอกช่วงที่ระบุสำหรับการจัดรูปแบบข้อความ คุณจะปรับขนาดข้อมูลได้โดยแปลงเป็นเปอร์เซ็นต์ของค่ามากที่สุดในข้อมูล หรือจะใช้การจัดรูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองเพื่อจัดการการปรับขนาดให้คุณก็ได้
ไวยากรณ์:
chd=t:val,val,val|val,val,val...
- <data>
- แต่ละชุดเป็นค่าที่คั่นด้วยเครื่องหมายจุลภาคอย่างน้อย 1 ค่า แยกหลายชุดโดยใช้อักขระไปป์ (
|
) ค่าต่างๆ เป็นตัวเลขทศนิยมตั้งแต่ 0-100 ค่าที่น้อยกว่า 0 หรืออักขระขีดล่าง ( _ ) จะถือว่าเป็นค่าว่าง ค่าที่สูงกว่า 100 จะถูกตัดเหลือ 100
ตัวอย่างเช่น
ตารางที่มีค่าห้าค่า เครื่องหมายขีดล่างจะถือว่าเป็นค่าว่าง ค่า -30 ต่ำกว่าค่าขั้นต่ำ ดังนั้นค่าดังกล่าวจะหายไป และค่า 200 จะถูกตัดเหลือ 100 | chd=t:_,30,-30,50,80,200 |
รูปแบบข้อความที่มีการปรับขนาดอัตโนมัติ
คุณสามารถกำหนดค่าแผนภูมิบางรายการให้ปรับขนาดโดยอัตโนมัติให้เหมาะกับข้อมูลได้ ระบบจะปรับขนาดแผนภูมิให้มีค่ามากที่สุดที่ด้านบนสุดของแผนภูมิ และค่าน้อยที่สุด (หรือ 0 ถ้าค่าทั้งหมดมากกว่า 0) จะอยู่ล่างสุด
ค่าเครื่องหมายใดๆ ที่แสดงในแผนภูมิจะแสดงค่าจริง ไม่ใช่ค่าที่ปรับขนาด
ฟีเจอร์นี้ใช้ได้กับค่าที่จัดรูปแบบเป็นข้อความเท่านั้น และใช้ไม่ได้กับแผนภูมิบางประเภท ทดสอบประเภทแผนภูมิเพื่อดูว่ารองรับหรือไม่
ไวยากรณ์
cht=t:val,val,val... chds=a
ตัวอย่างเช่น
โปรดทราบว่าคุณไม่ควรใช้ค่า < 0 สำหรับแผนภูมิวงกลม |
chd=t:-5,30,-30,50,80,200 |
รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง
รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองช่วยให้คุณระบุจำนวนจุดลอยตัวที่เป็นบวกหรือลบได้เอง ร่วมกับพารามิเตอร์การปรับขนาด ซึ่งช่วยให้คุณระบุช่วงที่กำหนดเองสำหรับแผนภูมิได้ แผนภูมินี้มีประโยชน์เมื่อคุณไม่ต้องการกังวลเกี่ยวกับการจำกัดข้อมูลไว้เฉพาะช่วงใดช่วงหนึ่ง หรือไม่ต้องการปรับขนาดข้อมูลด้วยตนเองเพื่อให้พอดีกับแผนภูมิ รูปแบบนี้จะปรับเส้นศูนย์ให้คุณตามความจำเป็น รูปแบบของข้อมูลจะเหมือนกับรูปแบบข้อความพื้นฐาน
สำหรับการปรับขนาดอัตโนมัติ ให้ระบุ chds=a
การจัดรูปแบบข้อความ (ไม่ว่าจะใช้พารามิเตอร์แบบง่ายหรือโดยใช้พารามิเตอร์ที่กำหนดเอง) จะทำให้ได้สตริงข้อมูลที่ยาวที่สุดในทุกรูปแบบ
ไวยากรณ์:
การจัดรูปแบบข้อความด้วยการปรับขนาดที่กำหนดเองต้องใช้พารามิเตอร์ 2 ตัว ได้แก่
chd=t:val,val,val|val,val,val chds=<series_1_min>,<series_1_max>,...,<series_n_min>,<series_n_max>
- chd=t:<data>
- เหมือนกับรูปแบบข้อมูลธรรมดา: ค่าที่คั่นด้วยคอมมาอย่างน้อย 1 ค่าต่อชุด
หลายชุดคั่นด้วยอักขระไปป์ (
|
) ช่วงของค่าที่ได้รับอนุญาตในแต่ละชุดจะระบุโดยพารามิเตอร์chds
- Chds
- ชุดค่าต่ำสุดและสูงสุดที่ได้รับอนุญาตสำหรับชุดข้อมูลแต่ละชุด โดยคั่นด้วยคอมมา คุณต้องระบุทั้งค่าสูงสุดและต่ำสุด หากมีคู่น้อยกว่าชุดข้อมูล คู่สุดท้ายจะใช้กับชุดข้อมูลที่เหลือทั้งหมด โปรดทราบว่าการดำเนินการนี้ไม่ได้เปลี่ยนช่วงแกน หากต้องการเปลี่ยนช่วงแกน คุณต้องตั้งค่าพารามิเตอร์
chxr
ค่าที่ใช้ได้จะอยู่ในช่วง (+/-)9.999e(+/-)199 คุณจะระบุค่าเป็นแบบมาตรฐานหรือ E ก็ได้- <series_1_min>
- ค่าต่ำสุดที่อนุญาตในชุดแรก ระบบจะทำเครื่องหมายค่าที่ต่ำกว่านั้นว่าขาดหายไป
- <series_1_max>
- ค่าสูงสุดที่ใช้ได้ในชุดแรก ระบบจะตัดค่าที่สูงกว่าให้กับค่านี้
ตัวอย่างเช่น
แผนภูมิแท่งที่มีสเกลต่ำสุด/สูงสุดอยู่ที่ -80-140 ค่า 30, -60, 50, 140 และ 80 จะอยู่ในสเกล จึงไม่ถูกตัดให้สั้นลง โปรดทราบว่า เส้นศูนย์จะปรับให้คุณ 80/(140 + 80) = 0.36 ของแนวแกน Y นอกจากนี้โปรดทราบว่าช่วงแกน Y เริ่มต้นยังคงเป็น 0-100 แม้ว่าพารามิเตอร์ |
|
รูปแบบการเข้ารหัสแบบง่าย
รูปแบบการเข้ารหัสอย่างง่ายช่วยให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-61 โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 1 ตัว ซึ่งจะส่งผลให้ URL ของสตริงข้อมูลที่สั้นที่สุดในทุกรูปแบบ อย่างไรก็ตาม หากคุณมีแผนภูมิเส้นหรือแผนภูมิแท่งที่ยาวกว่า 100 พิกเซลตามแกนข้อมูล คุณอาจต้องการใช้รูปแบบอื่น เนื่องจากเป็นเพราะระบบรองรับค่าข้อมูลเพียง 62 ค่าเท่านั้น ความละเอียดของข้อมูลจึงมากกว่าความละเอียดในการแสดงผลมาก และค่าต่างๆ จะคลาดเคลื่อนไปเล็กน้อย (แต่ไม่มาก แต่จะเห็นได้ในแผนภูมิขนาดใหญ่)
โปรดทราบว่าหากคุณใช้พารามิเตอร์ chds
กับการเข้ารหัสอย่างง่าย ขนาดองค์ประกอบของข้อมูลในแผนภูมิจะไม่ได้รับผลกระทบ แต่ค่าเครื่องหมายจุดข้อมูลทั้งหมดจะไม่ได้รับผลกระทบ
ไวยากรณ์:
chd=s: <series_1> ,..., <series_n>
- <series_1>
- สตริงที่อักขระแต่ละตัวเป็นจุดข้อมูลเดียวและคั่นชุดด้วยคอมมา ไม่แยกแต่ละค่าภายในชุด ต่อไปนี้คืออักขระข้อมูลที่รองรับพร้อมค่าที่เกี่ยวข้อง
A—Z
โดยที่A
= 0,B
= 1 และต่อไปเรื่อยๆ จนถึงZ
= 25a—z
โดยที่a
= 26,b
= 27 และต่อไปเรื่อยๆ จนถึงz
= 510(zero)—9
โดยที่0
= 52 และ9
= 61- อักขระขีดล่าง (
_
) แสดงถึงค่าที่ขาดหายไป
คุณสามารถใช้เครื่องมือต่อไปนี้เพื่อเข้ารหัสค่าเดียว หรือโค้ด JavaScript เพื่อปรับขนาดและเข้ารหัสสตริง URL ทั้งหมด
ตัวอย่างเช่น
เทียบเท่ากับสตริงที่เข้ารหัสข้อความ chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 |
<title="chs=320x200&cht=bvs&chd=s:btb19_,mn5tzb&chco=ffcc33,ffe9a4&chxr=0,0,61,5&chxt=y" alt="แผนภูมิแท่งแบบเรียงซ้อน&chd=s:btb19_,mn5tzb&chco=ffcc33,ffe9a4&chxr=0,0,61,5&chxt=y" alt="แผนภูมิแท่งแบบเรียงซ้อนที่มีสองชุดและแต่ละค่า 6 ค่า,การเข้ารหัสอย่างง่าย" src="/static/thchd=s:BTb19_,Mn5tzb |
รูปแบบการเข้ารหัสเพิ่มเติม
รูปแบบการเข้ารหัสเพิ่มเติมช่วยให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-4095 (รวม 0-4095) โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 2 ตัว โดยจะใช้ไวยากรณ์ที่แตกต่างจากการเข้ารหัสทั่วไปเล็กน้อย
โปรดทราบว่าหากคุณใช้พารามิเตอร์ chds
กับการเข้ารหัสแบบง่ายๆ ขนาดองค์ประกอบของข้อมูลในแผนภูมิจะไม่ได้รับผลกระทบ แต่ค่าเครื่องหมายจุดข้อมูลทั้งหมดจะได้รับผลกระทบ
ไวยากรณ์:
chd=e: <series_1> ,..., <series_n>
- <series_1>
- สตริงที่อักขระ 2 ตัวแต่ละตัวเป็นจุดข้อมูลเดียว และคั่นชุดด้วยคอมมา แต่ละค่าในชุดจะไม่มีการคั่นด้วย อักขระการเข้ารหัสที่รองรับมีดังนี้
A—Z
a—z
0—9
- ระยะเวลา (
.
) - ขีดกลาง (
-
) - ค่าที่หายไปจะมีการระบุด้วยเครื่องหมายขีดล่างคู่ (
__
)
ต่อไปนี้เป็นคำอธิบายโดยย่อของค่าที่เข้ารหัส
AA
= 0,AB
= 1 และต่อไปยังAZ
= 25Aa
= 26,Ab
= 27 และต่อไปยังAz
= 51A0
= 52,A1
= 53 และต่อไปยังA9
= 61A-
= 62,A.
= 63BA
= 64,BB
= 65 และต่อไปยังBZ
= 89Ba
= 90,Bb
= 91 และต่อไปยังBz
= 115B0
= 116,B1
= 117 และต่อไปยังB9
= 125B-
= 126,B.
= 1279A
= 3904,9B
= 3905 และต่อไปยัง9Z
= 39299a
= 3930,9b
= 3931 และต่อไปยัง9z
= 395590
= 3956,91
= 3957 และต่อไปยัง99
= 39659-
= 3,966,9.
= 3,967-A
= 3968,-B
= 3969 และต่อไปยัง-Z
= 3, 993-a
= 3,994,-b
= 3,995 และต่อไปยัง-z
= 4019-0
= 4020,-1
= 4021 และต่อไปยัง-9
= 4029--
= 4,030,-.
= 4,031.A
= 4032,.B
= 4033 และต่อไปยัง.Z
= 4057.a
= 4058,.b
= 4059 และต่อไปยัง.z
= 4083.0
= 4084,.1
= 4085 และต่อไปยัง.9
= 4093.-
= 4,094,..
= 4,095
คุณสามารถใช้เครื่องมือต่อไปนี้เพื่อเข้ารหัสค่าเดียว หรือโค้ด JavaScript เพื่อปรับขนาดและเข้ารหัสสตริง URL ทั้งหมด
ตัวอย่างเช่น
เทียบเท่ากับสตริงที่เข้ารหัสข้อความ chd=t:90,1000,2700,3500|3968,-1,1100,250 |
chd=e:BaPoqM2s,-A__RMD6 |
การปรับขนาดข้อมูลและการปรับขนาดแกน
มีการปรับขนาดข้อมูลเพื่อให้พอดีกับแผนภูมิของคุณ ทั้งแบบชัดเจน (เมื่อใช้รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง) หรือโดยนัย (ประเภทอื่นๆ ทั้งหมด) ซึ่งหมายความว่าแผนภูมิแต่ละรายการจะปรับขนาดให้พอดีกับช่วงที่มีอยู่ของรูปแบบ ไม่ใช่ช่วงจริงของข้อมูลที่คุณระบุ
คุณอาจต้องปรับขนาดข้อมูลเพื่อให้ครอบคลุมค่าทั้งหมดที่ได้จากรูปแบบของคุณเพื่อสร้างความแตกต่างที่ชัดเจนมากขึ้น คุณปรับขนาดข้อมูลได้ด้วยการปรับขนาดข้อมูลให้พอดีกับรูปแบบที่ใช้ หรือด้วยการระบุช่วงข้อมูลอย่างชัดแจ้ง (กล่าวคือ ใช้รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง)
โปรดทราบว่าค่าของป้ายกำกับแกนจะคำนวณตามมาตราส่วนที่เป็นอิสระโดยสมบูรณ์และไม่เกี่ยวข้องกับค่าข้อมูล แต่จะใช้ช่วงเริ่มต้น 0-100 อย่างไรก็ตาม คุณเปลี่ยนช่วงดังกล่าวได้
ส่วนนี้จะอธิบายปัญหาทั้งสอง
ปรับขนาดข้อมูลให้พอดีกับช่วงรูปแบบ [แผนภูมิทั้งหมดยกเว้น Pie และ Venn]
รูปแบบที่แตกต่างกันจะรองรับช่วงค่าที่ต่างกัน ระบบจะปรับสเกลข้อมูลตามช่วงรูปแบบของคุณ เพื่อให้ค่าสูงสุดที่รูปแบบของคุณรองรับแสดงที่ด้านบนของแกนนั้น และค่าต่ำสุดสำหรับรูปแบบจะแสดงที่ด้านล่าง ตัวอย่างต่อไปนี้แสดงค่าเดียวกัน (100) โดยใช้รูปแบบข้อความพื้นฐาน (ช่วง 0-100) ข้อความที่มีการปรับขนาดที่กำหนดเอง (ช่วงที่กำหนดเอง 0-200) และรูปแบบการเข้ารหัสเพิ่มเติม (ช่วง 0-4095)
รูปแบบข้อความพื้นฐาน | รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง | รูปแบบการเข้ารหัสเพิ่มเติม |
---|---|---|
ค่า: 100 ( รูปแบบช่วง: 0—100 ตัวเลข 100 จะแสดงผลเป็น 100/100 เพื่อเพิ่มสเกล |
ค่า 100 ( รูปแบบช่วง: 0-200 ค่า 100 จะแสดงผลเป็น 100/200 เพื่อเพิ่มสเกล |
ค่า: 100 ( รูปแบบช่วง: 0—4095 ตัวเลข 100 จะแสดงผลเป็น 100/4095 เพื่อเพิ่มสเกล |
วิธีง่ายๆ ในการปรับขนาดข้อมูลให้พอดีกับแผนภูมิคือการใช้รูปแบบข้อความที่มีการปรับขนาด วิธีที่เกี่ยวข้องมากขึ้นคือการปรับขนาดข้อมูลด้วยตนเองให้พอดีกับช่วงรูปแบบที่รูปแบบของคุณรองรับ
แผนภูมิวงกลมและเวนน์: สำหรับแผนภูมิวงกลมและเวนน์ ค่าทั้งหมดจะสัมพัทธ์กัน ไม่ใช่สัดส่วนทั้งหมดของแผนภูมิ
chd=e:BkDIEs |
chd=t:100,200,300 |
ระบบจะคำนวณช่วงป้ายกำกับของแกนแยกกัน [แท่ง เส้น เรดาร์ กระจาย และแท่งเทียน]
คุณสามารถเลือกแสดงค่าแกนได้โดยใช้พารามิเตอร์ chxt
อย่างไรก็ตาม โปรดทราบว่าป้ายกำกับแกนไม่ได้คำนวณให้แสดงข้อมูลในแผนภูมิ แต่จะคำนวณแยกต่างหากโดย API หรือคุณระบุอย่างชัดแจ้ง
ช่วงแกนเริ่มต้นคือ 0-100 โดยไม่คำนึงถึงค่าข้อมูลหรือการปรับขนาดข้อมูล ตัวอย่างเช่น หากคุณแสดงแกน Y โดยใช้ป้ายกำกับแกนเริ่มต้นในแผนภูมิที่ใช้การเข้ารหัสแบบขยาย (ช่วง 0-4095) ป้ายกำกับแกน Y จะยังคงเป็น 0-100 เว้นแต่คุณจะเปลี่ยนค่าดังกล่าวอย่างชัดเจนตามที่อธิบายไว้ด้านล่าง ต่อไปนี้คือตัวอย่างที่แสดงป้ายกำกับแกน Y เริ่มต้นในแผนภูมิแท่งการเข้ารหัสที่ขยายซึ่งมีค่าข้อมูลเป็น 100
chd=e:Bk
(เทียบเท่ากับ chd=t:100
)
แต่คุณจะระบุช่วงแกนได้โดยใช้พารามิเตอร์ chxr
หากต้องการให้ค่าแกนแสดงถึงค่าข้อมูลจริง คุณต้องระบุค่าแกนต่ำสุดและสูงสุดที่ตรงกับช่วงรูปแบบของคุณ โปรดทราบว่ารูปแบบข้อความพื้นฐานมีสเกล 0-100 อยู่แล้ว ดังนั้นหากคุณใช้การจัดรูปแบบข้อความพื้นฐาน (ไม่มีการปรับขนาดที่กำหนดเอง) ค่าแกนจะตรงกับค่าของข้อมูลโดยค่าเริ่มต้น ลองดูตัวอย่างเหล่านี้
สักเล็กน้อย ต่อไปนี้เป็นแผนภูมิ 3 รายการที่มีข้อมูลเดียวกัน (15,26,51,61) แต่มีรูปแบบและแกนที่ต่างกัน
การเข้ารหัสแบบง่ายๆ ไม่มีการปรับขนาดแกน | การเข้ารหัสอย่างง่าย แกนปรับขนาด | ข้อความพื้นฐาน ไม่มีการปรับขนาดแกน |
---|---|---|
ช่วงค่าการเข้ารหัสอย่างง่าย: 0-61 ช่วงแกนเริ่มต้น (0-100) ช่วงการเข้ารหัสเล็กกว่าช่วงแกนป้ายกำกับ ดังนั้น แท่งกราฟจะไม่สอดคล้องกับค่าจริงบนป้ายกำกับแกน อย่างไรก็ตาม แท่งกราฟจะอยู่ในสัดส่วนที่เหมาะสมกัน |
ช่วงค่าการเข้ารหัสอย่างง่าย: 0-61 ช่วงของแกนตั้งค่าเป็น 0-61 อย่างชัดเจน ช่วงการเข้ารหัสและช่วงแกนมีค่าเท่ากัน ดังนั้นแท่งกราฟจะสอดคล้องกับค่าที่ถูกต้องบนแกน |
ช่วงค่ารูปแบบข้อความพื้นฐาน: 0—100 ช่วงแกนเริ่มต้น (0-100) ช่วงการเข้ารหัสและช่วงแกนจะเหมือนเดิมอีกครั้ง ดังนั้นค่าข้อมูลที่ถูกต้องจะแสดงบนแกนโดยค่าเริ่มต้น เนื่องจากช่วงรูปแบบข้อความมีขนาดใหญ่กว่าช่วงรูปแบบการเข้ารหัสแบบง่าย (100 หน่วยเทียบกับ 61 หน่วย) แท่งจึงมีขนาดเล็กกว่าแผนภูมิอื่นๆ แต่แผนภูมิทั้งหมดจะยังคงเป็นสัดส่วนกัน |
สคริปต์เข้ารหัส JavaScript
สำหรับการใช้งานจริง การเข้ารหัสข้อมูลด้วยโปรแกรมอาจง่ายกว่าการเข้ารหัสด้วยตนเอง
ข้อมูลโค้ด JavaScript ต่อไปนี้เข้ารหัสซีรีส์เดียวเป็นการเข้ารหัสแบบพื้นฐานหรือแบบextended และปรับขนาดค่าข้อมูลให้พอดีภายในช่วงทั้งหมดของการเข้ารหัสดังกล่าว ต้องระบุข้อมูลเป็นอาร์เรย์ของจำนวนบวก ค่าที่ระบุซึ่งไม่ใช่ตัวเลขที่เป็นบวกจะเข้ารหัสเป็นค่าที่ขาดหายไปโดยใช้อักขระขีดล่าง (_
)
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // This function scales the submitted values so that // maxVal becomes the highest value. function simpleEncode(valueArray,maxValue) { var chartData = ['s:']; for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) { chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue))); } else { chartData.push('_'); } } return chartData.join(''); } // Same as simple encoding, but for extended encoding. var EXTENDED_MAP= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.'; var EXTENDED_MAP_LENGTH = EXTENDED_MAP.length; function extendedEncode(arrVals, maxVal) { var chartData = 'e:'; for(i = 0, len = arrVals.length; i < len; i++) { // In case the array vals were translated to strings. var numericVal = new Number(arrVals[i]); // Scale the value to maxVal. var scaledVal = Math.floor(EXTENDED_MAP_LENGTH * EXTENDED_MAP_LENGTH * numericVal / maxVal); if(scaledVal > (EXTENDED_MAP_LENGTH * EXTENDED_MAP_LENGTH) - 1) { chartData += ".."; } else if (scaledVal < 0) { chartData += '__'; } else { // Calculate first and second digits and add them to the output. var quotient = Math.floor(scaledVal / EXTENDED_MAP_LENGTH); var remainder = scaledVal - EXTENDED_MAP_LENGTH * quotient; chartData += EXTENDED_MAP.charAt(quotient) + EXTENDED_MAP.charAt(remainder); } } return chartData; }
หากต้องการเข้ารหัสข้อมูล ให้เรียกใช้ฟังก์ชัน simpleEncode
หรือ extendedEncode
ส่งผ่านอาร์เรย์ที่มีข้อมูลของคุณ (valueArray
) และ
ค่าสูงสุดของข้อมูล (maxValue
) หากต้องการสร้างช่องว่างระหว่างค่าสูงสุดและด้านบนสุดของแผนภูมิ ให้ตั้งค่า maxValue
ให้มากกว่าจำนวนสูงสุดในอาร์เรย์ข้อมูล ดังนี้
var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65); var maxValue = 70; simpleEncode(valueArray, maxValue);