สร้าง Organization Chart ด้วย Google Visualization OrgChart สำหรับ Yii Framework 2

wave
มานพ กองอุ่น 23 พ.ค. 2016 16:17:16 10,657

การติดตั้งและใช้งาน Google Visualization Organization Chart โดยติดตั้งผ่าน Composer

การติดตั้ง

สำหรับการติดตั้งจะติดตั้ง Package ด้วย Composer โดยพิมพ์คำสั่ง

composer require kongoon/yii2-orgchart

การใช้งาน

[['v' => 'ค่าอ้างอิง(NodeID)', 'f' => 'ส่วนแสดงผลใช้ HTML ได้'],'ระบุ NodeID ที่ต้องการนำไปต่อ', 'Tooltip ตอน Mouse over'],

ตัวอย่างการใช้งาน ใน view

use kongoon\orgchart\OrgChart;

echo OrgChart::widget([
    'data' => [
            [['v' => 'Mike', 'f' => '<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=Mike&w=120&h=150" /><br  /> <strong>Mike</strong><br  />The President'],'', 'The President'],
            [['v' => 'Jim', 'f' => '<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=Jim&w=120&h=150" /><br  /><strong>Jim</strong><br  />The Test'],'Mike', 'VP'],
            [['v' => 'ทดสอบ', 'f' => '<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=ทดสอบ&w=120&h=150" /><br  /><strong>ทดสอบ</strong><br  />The Test'], 'Mike', ''],
            [['v' => 'Bob', 'f' => '<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=Bob&w=120&h=150" /><br  /><strong>Bob</strong><br  />The Test'], 'Jim', 'Bob Sponge'],
            [['v' => 'Caral', 'f' => '<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=Caral&w=120&h=150" /><br  /><strong>Caral</strong><br  />The Test'], 'Mike', 'Caral Title'],

    ]
]);

เสริมเพิ่มเติม

สามารถดูรายละเอียดได้ที่

https://developers.google.com/chart/interactive/docs/gallery/orgchart#example

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 10,657
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii google orgchart
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง