การติดตั้งและใช้งาน 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
ความคิดเห็น