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

คู่มือการเรียนรู้ Yii Framework 2 (Yii2)

บทเรียนดีๆ สำหรับผู้ที่ต้องการแบ่งปัน บทเรียนของคุณอาจมีค่าสำหรับอีกหลายๆ คน

beta version

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

มานพ กองอุ่น yii google orgchart 1,991

การติดตั้งและใช้งาน 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
มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 8 ผู้ติดตาม
  • 754 โพสต์
กลับขึ้นบน