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

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

สารบัญ

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

ภาพรวม

ข้อมูลสำหรับแผนภูมิเกือบทั้งหมดจะส่งโดยใช้พารามิเตอร์ chd ข้อมูลต้องส่งในรูปแบบใดรูปแบบหนึ่งต่อไปนี้

  • รูปแบบข้อความพื้นฐานหมายถึงจำนวนทศนิยมอย่างง่ายตั้งแต่ 0-100 รูปแบบนี้อ่านและเขียนได้ง่ายด้วยมือ
  • รูปแบบข้อความที่มีการปรับขนาดอัตโนมัติจะปรับขนาดแผนภูมิให้พอดีกับข้อมูลของคุณ
  • รูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองคล้ายกับรูปแบบข้อความพื้นฐาน แต่ให้คุณระบุช่วงที่กำหนดเองโดยใช้พารามิเตอร์ของ URL ที่ 2 ได้
  • รูปแบบการเข้ารหัสอย่างง่ายให้คุณระบุค่าจำนวนเต็มตั้งแต่ 0-61 โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกันตัวเดียว การเข้ารหัสนี้จะทำให้เป็นสตริงข้อมูลที่สั้นที่สุดของรูปแบบข้อมูลใดก็ได้ (หากมีค่ามากกว่า 9)
  • รูปแบบการเข้ารหัสเพิ่มเติมให้คุณระบุค่าจำนวนเต็มตั้งแต่ 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 หรืออักขระขีดล่าง ( _ ) จะถือว่าเป็นค่า Null ค่าที่มากกว่า 100 จะถูกตัดเหลือ 100

 

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

ตารางที่มี 5 ค่า ระบบจะถือว่าขีดล่างเป็นค่าว่าง ส่วนค่า -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 จะระบุช่วงของค่าที่อนุญาตในแต่ละชุด
CHD
ชุดของค่าสูงสุดที่อนุญาตและสูงสุดอย่างน้อย 1 ค่าสำหรับแต่ละชุดข้อมูล คั่นด้วยเครื่องหมายจุลภาค คุณต้องระบุทั้งค่าสูงสุดและต่ำสุด หากคุณระบุคู่น้อยกว่าจำนวนชุดข้อมูล คู่สุดท้ายจะมีผลกับชุดข้อมูลที่เหลือทั้งหมด โปรดทราบว่าการดำเนินการนี้ไม่ได้เปลี่ยนช่วงแกน หากต้องการเปลี่ยนช่วงแกน คุณต้องตั้งค่าพารามิเตอร์ 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 โดยเข้ารหัสด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกันตัวเดียว ซึ่งส่งผลให้ได้ URL สตริงข้อมูลที่สั้นที่สุดในบรรดารูปแบบข้อมูลทั้งหมด อย่างไรก็ตาม หากคุณมีแผนภูมิเส้นหรือแผนภูมิแท่งตามแนวแกนข้อมูลยาวกว่า 100 พิกเซล คุณอาจต้องใช้รูปแบบอื่น นั่นเป็นเพราะว่าด้วยการรองรับค่าข้อมูลเพียง 62 ค่า รายละเอียดของข้อมูลจะมากกว่ารายละเอียดของการแสดงผลมาก และค่าที่ได้จะคลาดเคลื่อนไปเล็กน้อย (ไม่มาก แต่เห็นได้ในแผนภูมิที่ใหญ่กว่า)

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

ไวยากรณ์

chd=s:
  <series_1>
    ,...,
  <series_n>
<ซีรีส์_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="แผนภูมิแท่งแบบซ้อนพร้อมชุดสองชุดและแต่ละค่า 6 ค่า, การเข้ารหัสแบบง่าย</title="/static/ch3,0x200,610,5&chxt=y&hl=th" alt="แผนภูมิแท่งแบบซ้อนที่มีสองชุดและ 6 ค่า,การเข้ารหัสแบบง่าย</title="/static/ch3_3,
chd=s:BTb19_,Mn5tzb

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

รูปแบบการเข้ารหัสเพิ่มเติม

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

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

ไวยากรณ์:

chd=e:
  <series_1>
    ,...,
  <series_n>
<ซีรีส์_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. = 3967
  • -A = 3968, -B = 3969 และต่อไปยัง -Z = 3993
  • -a = 3994, -b = 3995 และต่อไปยัง -z = 4019
  • -0 = 4020, -1 = 4021 และต่อไปยัง -9 = 4029
  • -- = 4030, -. = 4031
  • .A = 4032, .B = 4033 และต่อไปยัง .Z = 4057
  • .a = 4058, .b = 4059 และต่อไปยัง .z = 4083
  • .0 = 4084, .1 = 4085 และต่อไปยัง .9 = 4093
  • .- = 4094, .. = 4095

คุณใช้เครื่องมือต่อไปนี้เพื่อเข้ารหัสค่าเดียวหรือโค้ด JavaScript เพื่อปรับขนาดและเข้ารหัสสตริง URL ทั้งสตริงได้

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

เทียบเท่ากับสตริงที่เข้ารหัสข้อความ chd=t:90,1000,2700,3500|3968,-1,1100,250 แผนภูมิแท่งแบบซ้อนที่มี 2 ชุดที่มี 4 ค่าในแต่ละชุด การเข้ารหัสเพิ่มเติม
chd=e:BaPoqM2s,-A__RMD6

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

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

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

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

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

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

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

รูปแบบที่ต่างกันรองรับช่วงค่าที่ต่างกัน ระบบจะปรับขนาดข้อมูลตามช่วงรูปแบบเพื่อให้แสดงผลค่าสูงสุดที่รูปแบบรองรับไว้ที่ด้านบนสุดของแกน และแสดงผลค่าต่ำสุดสำหรับรูปแบบที่ด้านล่าง ตัวอย่างต่อไปนี้แสดงค่าเดียวกัน (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 อยู่แล้ว ดังนั้นหากคุณใช้การจัดรูปแบบข้อความพื้นฐาน (โดยไม่มีการปรับขนาดที่กำหนดเอง) ค่าแกนจะตรงกับค่าข้อมูลโดยค่าเริ่มต้น มาดูตัวอย่างกันสัก 2-3 ข้อ ต่อไปนี้คือแผนภูมิ 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);

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