#ตัวเลือกแผนภูมิ

กำหนดค่าวิธีการแสดงผลของแผนภูมิ ซึ่งรองรับ 2 โหมด ได้แก่ Basic (แบบกราฟิก) และ Custom (กำหนดเองด้วย JS) โหมด Basic เหมาะสำหรับการแมปข้อมูลอย่างรวดเร็วและการตั้งค่าคุณสมบัติทั่วไป ส่วนโหมด Custom เหมาะสำหรับสถานการณ์ที่ซับซ้อนและการปรับแต่งขั้นสูงครับ/ค่ะ

#โครงสร้างแผงควบคุม

Tips: เพื่อให้การตั้งค่าส่วนนี้ง่ายขึ้น คุณสามารถยุบแผงควบคุมอื่นๆ ลงก่อนได้ครับ/ค่ะ

แถบด้านบนสุดคือแถบเครื่องมือสำหรับดำเนินการ การเลือกโหมด:

• Basic: การตั้งค่าแบบกราฟิก โดยคุณสามารถเลือกประเภทแผนภูมิและทำการแมปฟิลด์ข้อมูลได้เลย รวมถึงปรับคุณสมบัติทั่วไปผ่านสวิตช์ต่างๆ ได้โดยตรงครับ/ค่ะ
• Custom: คุณจะต้องเขียนโค้ด JS ใน Editor เพื่อส่งคืนค่า option ของ ECharts ครับ/ค่ะ

#โหมด Basic

#เลือกประเภทแผนภูมิ

• รองรับแผนภูมิหลากหลายประเภท เช่น แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง (แนวตั้ง), แผนภูมิแท่ง (แนวนอน), แผนภูมิวงกลม, แผนภูมิโดนัท, แผนภูมิกรวย และแผนภูมิกระจาย เป็นต้น
• แต่ละประเภทแผนภูมิอาจต้องการฟิลด์ข้อมูลที่แตกต่างกัน ดังนั้น ควรตรวจสอบชื่อคอลัมน์และประเภทข้อมูลในส่วน "การสอบถามข้อมูล → ดูข้อมูล" ก่อนนะครับ/คะ

#การแมปฟิลด์

• สำหรับแผนภูมิเส้น/พื้นที่/แท่ง (แนวตั้ง)/แท่ง (แนวนอน):
  • xField: มิติข้อมูล (เช่น วันที่, หมวดหมู่, ภูมิภาค)
  • yField: ค่าที่วัดได้ (ค่าตัวเลขที่ถูกรวมหรือคำนวณแล้ว)
  • seriesField (ไม่บังคับ): ใช้สำหรับการจัดกลุ่มชุดข้อมูล (เช่น หากต้องการแสดงหลายเส้นหรือหลายกลุ่มแท่ง)
• สำหรับแผนภูมิวงกลม/โดนัท:
  • Category: มิติข้อมูลสำหรับจัดหมวดหมู่
  • Value: ค่าที่วัดได้
• สำหรับแผนภูมิกรวย:
  • Category: ขั้นตอนหรือหมวดหมู่
  • Value: ค่า (โดยทั่วไปคือจำนวนหรือเปอร์เซ็นต์)
• สำหรับแผนภูมิกระจาย:
  • xField, yField: ใช้สำหรับระบุค่าที่วัดได้หรือมิติข้อมูลสองค่าสำหรับแกนพิกัด

สำหรับตัวเลือกการตั้งค่าแผนภูมิเพิ่มเติม สามารถอ้างอิงเอกสารของ ECharts ในส่วน แกนพิกัด และ ตัวอย่าง ได้เลยครับ/ค่ะ

ข้อควรทราบ:

• หลังจากเปลี่ยนมิติข้อมูลหรือค่าที่วัดได้แล้ว ควรตรวจสอบการแมปข้อมูลอีกครั้ง เพื่อป้องกันไม่ให้แผนภูมิว่างเปล่าหรือแสดงผลผิดพลาดครับ/ค่ะ
• สำหรับแผนภูมิวงกลม/โดนัท และแผนภูมิกรวย จำเป็นต้องมีข้อมูลในรูปแบบ "หมวดหมู่ + ค่า" เสมอครับ/ค่ะ

#คุณสมบัติทั่วไป

• การซ้อนทับ (Stack), การทำให้เส้นเรียบ (Smooth) สำหรับแผนภูมิเส้น/พื้นที่
• การแสดงป้ายกำกับ (Labels), คำแนะนำ (Tooltip), คำอธิบาย (Legend)
• การหมุนป้ายกำกับแกน (Axis label rotation), เส้นแบ่ง (Split lines)
• รัศมีและรัศมีด้านในของแผนภูมิวงกลม/โดนัท, วิธีการเรียงลำดับของแผนภูมิกรวย

ข้อแนะนำ:

• สำหรับข้อมูลอนุกรมเวลา (Time series) ควรใช้แผนภูมิเส้นหรือแผนภูมิพื้นที่ และเปิดการทำให้เส้นเรียบ (Smooth) ในระดับที่เหมาะสมครับ/ค่ะ ส่วนการเปรียบเทียบข้อมูลตามหมวดหมู่ใหญ่ๆ ควรใช้แผนภูมิแท่ง (แนวตั้ง) หรือแผนภูมิแท่ง (แนวนอน)
• หากข้อมูลมีความหนาแน่นมาก ไม่จำเป็นต้องเปิดการแสดงป้ายกำกับทั้งหมด เพื่อหลีกเลี่ยงการบดบังข้อมูลอื่นๆ ครับ/ค่ะ

#โหมด Custom

โหมดนี้ใช้สำหรับส่งคืนค่า option ของ ECharts แบบเต็มรูปแบบ ซึ่งเหมาะสำหรับการปรับแต่งขั้นสูง เช่น การรวมหลายชุดข้อมูลเข้าด้วยกัน, การสร้างคำแนะนำ (tooltip) ที่ซับซ้อน หรือการกำหนดสไตล์แบบไดนามิกครับ/ค่ะ วิธีที่แนะนำคือการรวมข้อมูลทั้งหมดไว้ใน dataset.source สำหรับรายละเอียดการใช้งานเพิ่มเติม โปรดดูเอกสารของ ECharts ในส่วน Dataset ครับ/ค่ะ

#บริบทข้อมูล (Data context)

• ctx.data.objects: อาร์เรย์ของอ็อบเจกต์ (แต่ละแถวคือหนึ่งเรคคอร์ด ซึ่งเป็นรูปแบบที่แนะนำครับ/ค่ะ)
• ctx.data.rows: อาร์เรย์สองมิติ (รวมส่วนหัวตาราง)
• ctx.data.columns: อาร์เรย์สองมิติที่จัดกลุ่มข้อมูลตามคอลัมน์

#ตัวอย่าง: แผนภูมิเส้นแสดงยอดสั่งซื้อรายเดือน

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}

#ดูตัวอย่างและบันทึก

• เมื่อคุณแก้ไขในโหมด Custom เสร็จแล้ว สามารถคลิกปุ่ม "ดูตัวอย่าง" ทางด้านขวาเพื่ออัปเดตการแสดงผลแผนภูมิได้เลยครับ/ค่ะ
• ที่ด้านล่าง ให้คลิก "บันทึก" เพื่อให้การตั้งค่ามีผลและบันทึกการเปลี่ยนแปลง หรือคลิก "ยกเลิก" เพื่อยกเลิกการแก้ไขทั้งหมดในครั้งนี้ครับ/ค่ะ