รูปแบบข้อมูล

เอกสารนี้อธิบายวิธีส่งข้อมูลแผนภูมิไปยัง Google Chart API

สารบัญ

  1. ภาพรวม
  2. รูปแบบข้อความพื้นฐาน
  3. รูปแบบข้อความที่ใช้การปรับขนาดอัตโนมัติ
  4. รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง
  5. รูปแบบการเข้ารหัสอย่างง่าย
  6. รูปแบบการเข้ารหัสแบบขยาย
  7. การปรับขนาดข้อมูลและการปรับขนาดแกน
  8. สคริปต์การเข้ารหัส JavaScript

ภาพรวม

ข้อมูลสำหรับแผนภูมิเกือบทั้งหมดจะส่งโดยใช้พารามิเตอร์ 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 แผนภูมิแท่งที่มีค่า 5 ค่า การเข้ารหัสข้อความ
chd=t:_,30,-30,50,80,200

กลับไปด้านบน

รูปแบบข้อความที่มีการปรับขนาดอัตโนมัติ

คุณสามารถกำหนดค่าแผนภูมิบางรายการให้ปรับขนาดโดยอัตโนมัติให้เหมาะกับข้อมูลได้ ระบบจะปรับขนาดแผนภูมิให้มีค่ามากที่สุดที่ด้านบนสุดของแผนภูมิ และค่าน้อยที่สุด (หรือ 0 ถ้าค่าทั้งหมดมากกว่า 0) จะอยู่ล่างสุด

ค่าเครื่องหมายใดๆ ที่แสดงในแผนภูมิจะแสดงค่าจริง ไม่ใช่ค่าที่ปรับขนาด

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

ไวยากรณ์

cht=t:val,val,val...
chds=a

ตัวอย่างเช่น


chd=t:5,30,50,80,200
chds=a

โปรดทราบว่าคุณไม่ควรใช้ค่า < 0 สำหรับแผนภูมิวงกลม

 แผนภูมิแท่งที่มีค่า 5 ค่า การเข้ารหัสข้อความ
chd=t:-5,30,-30,50,80,200
chds=a

กลับไปด้านบน

รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง

รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองช่วยให้คุณระบุจำนวนจุดลอยตัวที่เป็นบวกหรือลบได้เอง ร่วมกับพารามิเตอร์การปรับขนาด ซึ่งช่วยให้คุณระบุช่วงที่กำหนดเองสำหรับแผนภูมิได้ แผนภูมินี้มีประโยชน์เมื่อคุณไม่ต้องการกังวลเกี่ยวกับการจำกัดข้อมูลไว้เฉพาะช่วงใดช่วงหนึ่ง หรือไม่ต้องการปรับขนาดข้อมูลด้วยตนเองเพื่อให้พอดีกับแผนภูมิ รูปแบบนี้จะปรับเส้นศูนย์ให้คุณตามความจำเป็น รูปแบบของข้อมูลจะเหมือนกับรูปแบบข้อความพื้นฐาน

สำหรับการปรับขนาดอัตโนมัติ ให้ระบุ 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 แม้ว่าพารามิเตอร์ chds ค่าของป้ายกำกับจะไม่ได้แสดงถึงค่าข้อมูลจริง

 แผนภูมิแท่งที่มีค่า 5 ค่า การเข้ารหัสข้อความพร้อมการปรับขนาดข้อมูล

chd=t:30,-60,50,140,80,-90
chds=-80,140

กลับไปด้านบน

รูปแบบการเข้ารหัสแบบง่าย

รูปแบบการเข้ารหัสอย่างง่ายช่วยให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-61 โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 1 ตัว ซึ่งจะส่งผลให้ URL ของสตริงข้อมูลที่สั้นที่สุดในทุกรูปแบบ อย่างไรก็ตาม หากคุณมีแผนภูมิเส้นหรือแผนภูมิแท่งที่ยาวกว่า 100 พิกเซลตามแกนข้อมูล คุณอาจต้องการใช้รูปแบบอื่น เนื่องจากเป็นเพราะระบบรองรับค่าข้อมูลเพียง 62 ค่าเท่านั้น ความละเอียดของข้อมูลจึงมากกว่าความละเอียดในการแสดงผลมาก และค่าต่างๆ จะคลาดเคลื่อนไปเล็กน้อย (แต่ไม่มาก แต่จะเห็นได้ในแผนภูมิขนาดใหญ่)

โปรดทราบว่าหากคุณใช้พารามิเตอร์ chds กับการเข้ารหัสอย่างง่าย ขนาดองค์ประกอบของข้อมูลในแผนภูมิจะไม่ได้รับผลกระทบ แต่ค่าเครื่องหมายจุดข้อมูลทั้งหมดจะไม่ได้รับผลกระทบ

ไวยากรณ์:

chd=s:
  <series_1>
    ,...,
  <series_n>
<series_1>
สตริงที่อักขระแต่ละตัวเป็นจุดข้อมูลเดียวและคั่นชุดด้วยคอมมา ไม่แยกแต่ละค่าภายในชุด ต่อไปนี้คืออักขระข้อมูลที่รองรับพร้อมค่าที่เกี่ยวข้อง
  • A—Z โดยที่ A = 0, B = 1 และต่อไปเรื่อยๆ จนถึง Z = 25
  • a—z โดยที่ a = 26, b = 27 และต่อไปเรื่อยๆ จนถึง z = 51
  • 0(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/th
chd=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 = 25
  • Aa = 26, Ab = 27 และต่อไปยัง Az = 51
  • A0 = 52, A1 = 53 และต่อไปยัง A9 = 61
  • A- = 62, A. = 63
  • BA = 64, BB = 65 และต่อไปยัง BZ = 89
  • Ba = 90, Bb = 91 และต่อไปยัง Bz = 115
  • B0 = 116, B1 = 117 และต่อไปยัง B9 = 125
  • B- = 126, B. = 127
  • 9A = 3904, 9B = 3905 และต่อไปยัง 9Z = 3929
  • 9a = 3930, 9b = 3931 และต่อไปยัง 9z = 3955
  • 90 = 3956, 91 = 3957 และต่อไปยัง 99 = 3965
  • 9- = 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 แผนภูมิแท่งแบบซ้อนที่มี 2 ชุด ชุดละ 4 ค่า การเข้ารหัสแบบขยาย
chd=e:BaPoqM2s,-A__RMD6

กลับไปด้านบน

การปรับขนาดข้อมูลและการปรับขนาดแกน

มีการปรับขนาดข้อมูลเพื่อให้พอดีกับแผนภูมิของคุณ ทั้งแบบชัดเจน (เมื่อใช้รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง) หรือโดยนัย (ประเภทอื่นๆ ทั้งหมด) ซึ่งหมายความว่าแผนภูมิแต่ละรายการจะปรับขนาดให้พอดีกับช่วงที่มีอยู่ของรูปแบบ ไม่ใช่ช่วงจริงของข้อมูลที่คุณระบุ

คุณอาจต้องปรับขนาดข้อมูลเพื่อให้ครอบคลุมค่าทั้งหมดที่ได้จากรูปแบบของคุณเพื่อสร้างความแตกต่างที่ชัดเจนมากขึ้น คุณปรับขนาดข้อมูลได้ด้วยการปรับขนาดข้อมูลให้พอดีกับรูปแบบที่ใช้ หรือด้วยการระบุช่วงข้อมูลอย่างชัดแจ้ง (กล่าวคือ ใช้รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง)

โปรดทราบว่าค่าของป้ายกำกับแกนจะคำนวณตามมาตราส่วนที่เป็นอิสระโดยสมบูรณ์และไม่เกี่ยวข้องกับค่าข้อมูล แต่จะใช้ช่วงเริ่มต้น 0-100 อย่างไรก็ตาม คุณเปลี่ยนช่วงดังกล่าวได้

ส่วนนี้จะอธิบายปัญหาทั้งสอง

ปรับขนาดข้อมูลให้พอดีกับช่วงรูปแบบ [แผนภูมิทั้งหมดยกเว้น Pie และ Venn]

รูปแบบที่แตกต่างกันจะรองรับช่วงค่าที่ต่างกัน ระบบจะปรับสเกลข้อมูลตามช่วงรูปแบบของคุณ เพื่อให้ค่าสูงสุดที่รูปแบบของคุณรองรับแสดงที่ด้านบนของแกนนั้น และค่าต่ำสุดสำหรับรูปแบบจะแสดงที่ด้านล่าง ตัวอย่างต่อไปนี้แสดงค่าเดียวกัน (100) โดยใช้รูปแบบข้อความพื้นฐาน (ช่วง 0-100) ข้อความที่มีการปรับขนาดที่กำหนดเอง (ช่วงที่กำหนดเอง 0-200) และรูปแบบการเข้ารหัสเพิ่มเติม (ช่วง 0-4095)

รูปแบบข้อความพื้นฐาน รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเอง รูปแบบการเข้ารหัสเพิ่มเติม
แผนภูมิแท่งที่มีข้อความพื้นฐานพร้อมการปรับขนาดที่กำหนดเอง

ค่า: 100 (chd=t:100)

รูปแบบช่วง: 0—100

ตัวเลข 100 จะแสดงผลเป็น 100/100 เพื่อเพิ่มสเกล

ค่า 100 (chd=t:100, chds=0,200)

รูปแบบช่วง: 0-200

ค่า 100 จะแสดงผลเป็น 100/200 เพื่อเพิ่มสเกล

ค่า: 100 (chd=e:Bk)

รูปแบบช่วง: 0—4095

ตัวเลข 100 จะแสดงผลเป็น 100/4095 เพื่อเพิ่มสเกล

วิธีง่ายๆ ในการปรับขนาดข้อมูลให้พอดีกับแผนภูมิคือการใช้รูปแบบข้อความที่มีการปรับขนาด วิธีที่เกี่ยวข้องมากขึ้นคือการปรับขนาดข้อมูลด้วยตนเองให้พอดีกับช่วงรูปแบบที่รูปแบบของคุณรองรับ

แผนภูมิวงกลมและเวนน์: สำหรับแผนภูมิวงกลมและเวนน์ ค่าทั้งหมดจะสัมพัทธ์กัน ไม่ใช่สัดส่วนทั้งหมดของแผนภูมิ

chd=e:BkDIEs chd=t:100,200,300
chds=0,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) แต่มีรูปแบบและแกนที่ต่างกัน

การเข้ารหัสแบบง่ายๆ ไม่มีการปรับขนาดแกน การเข้ารหัสอย่างง่าย แกนปรับขนาด ข้อความพื้นฐาน ไม่มีการปรับขนาดแกน

chd=s:Paz9
 

ช่วงค่าการเข้ารหัสอย่างง่าย: 0-61

ช่วงแกนเริ่มต้น (0-100)

ช่วงการเข้ารหัสเล็กกว่าช่วงแกนป้ายกำกับ ดังนั้น แท่งกราฟจะไม่สอดคล้องกับค่าจริงบนป้ายกำกับแกน อย่างไรก็ตาม แท่งกราฟจะอยู่ในสัดส่วนที่เหมาะสมกัน

chd=s:Paz9
    chxr=0,0,61,10

ช่วงค่าการเข้ารหัสอย่างง่าย: 0-61

ช่วงของแกนตั้งค่าเป็น 0-61 อย่างชัดเจน

ช่วงการเข้ารหัสและช่วงแกนมีค่าเท่ากัน ดังนั้นแท่งกราฟจะสอดคล้องกับค่าที่ถูกต้องบนแกน

chd=t:15,26,51,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);

กลับไปด้านบน