#เหตุการณ์การโต้ตอบแบบกำหนดเอง

คุณสามารถเขียนโค้ด JavaScript ในตัวแก้ไขเหตุการณ์ (Events Editor) เพื่อลงทะเบียนการโต้ตอบผ่านอินสแตนซ์ ECharts ที่ชื่อ chart ซึ่งจะช่วยให้เกิดการเชื่อมโยงการทำงานต่างๆ ได้ เช่น การเปลี่ยนไปหน้าใหม่ หรือการเปิดหน้าต่างป๊อปอัปเพื่อวิเคราะห์ข้อมูลเชิงลึก (drill-down) ครับ/ค่ะ

#การลงทะเบียนและยกเลิกการลงทะเบียนเหตุการณ์

• ลงทะเบียน: chart.on(eventName, handler)
• ยกเลิกการลงทะเบียน: chart.off(eventName, handler) หรือ chart.off(eventName) เพื่อล้างเหตุการณ์ที่มีชื่อเดียวกัน

ข้อควรระวัง: เพื่อความปลอดภัย เราขอแนะนำอย่างยิ่งให้ยกเลิกการลงทะเบียนเหตุการณ์ก่อนที่จะลงทะเบียนใหม่ทุกครั้งครับ/ค่ะ!

#โครงสร้างข้อมูลของพารามิเตอร์ params ในฟังก์ชัน handler

ฟิลด์ที่ใช้บ่อยได้แก่ params.data และ params.name เป็นต้น ครับ/ค่ะ

#ตัวอย่าง: คลิกเพื่อไฮไลต์ส่วนที่เลือก

chart.off('click');
chart.on('click', (params) => {
  const { seriesIndex, dataIndex } = params;
  // ไฮไลต์จุดข้อมูลปัจจุบัน
  chart.dispatchAction({ type: 'highlight', seriesIndex, dataIndex });
  // ยกเลิกการไฮไลต์จุดอื่นๆ
  chart.dispatchAction({ type: 'downplay', seriesIndex });
});

#ตัวอย่าง: คลิกเพื่อเปลี่ยนหน้า

chart.off('click');
chart.on('click', (params) => {
  const order_date = params.data[0]
  
  // วิธีที่ 1: การเปลี่ยนหน้าภายในแอปพลิเคชัน โดยไม่ต้องรีเฟรชหน้าทั้งหมด (แนะนำ) เพียงแค่ระบุพาธแบบสัมพัทธ์
  ctx.router.navigate(`/new-path/orders?order_date=${order_date}`)

  // วิธีที่ 2: การเปลี่ยนไปยังหน้าภายนอก ต้องใช้ลิงก์แบบเต็ม
  window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`

  // วิธีที่ 3: เปิดหน้าภายนอกในแท็บใหม่ ต้องใช้ลิงก์แบบเต็ม
  window.open(`https://www.host.com/new-path/orders?order_date=${order_date}`)
});

#ตัวอย่าง: คลิกเพื่อเปิดหน้าต่างป๊อปอัปแสดงรายละเอียด (การวิเคราะห์เชิงลึก)

chart.off('click');
chart.on('click', (params) => {
  ctx.openView(ctx.model.uid + '-1', {
    mode: 'dialog',
    size: 'large',
    defineProperties: {}, // ลงทะเบียนตัวแปรบริบทสำหรับหน้าต่างป๊อปอัปใหม่
  });
});

ในหน้าต่างป๊อปอัปที่เปิดขึ้นมาใหม่ คุณสามารถใช้ตัวแปรบริบทของแผนภูมิที่ประกาศไว้ผ่าน ctx.view.inputArgs.XXX ได้ครับ/ค่ะ

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

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

ข้อแนะนำ:

• ควรใช้ chart.off('event') ก่อนการผูกเหตุการณ์ทุกครั้ง เพื่อหลีกเลี่ยงการทำงานซ้ำซ้อนหรือการใช้หน่วยความจำที่เพิ่มขึ้นครับ/ค่ะ
• ในฟังก์ชัน handler ของเหตุการณ์ ควรใช้การดำเนินการที่เบา (เช่น dispatchAction, setOption) เพื่อหลีกเลี่ยงการบล็อกกระบวนการเรนเดอร์ครับ/ค่ะ
• ควรตรวจสอบร่วมกับการตั้งค่าแผนภูมิและการเรียกดูข้อมูล เพื่อให้แน่ใจว่าฟิลด์ที่ถูกจัดการในเหตุการณ์นั้นสอดคล้องกับข้อมูลปัจจุบันครับ/ค่ะ