در قسمت قبلی درباره ایجاد نمودار سازمانی تحت وب صحبت کردیم .حال اگر بخواهیم آن را با رنگهای مختلف ایجاد کنیم مانند شکل ذیل :
بدین صورت باید عمل کنیم:
نمودار در داخل canvas رسم شده است. برای اینکه پس زمینه (background) و حاشیههای آن (borders) را رنگ آمیزی کنیم، باید تابع رنگ آمیزی را قبل از تابع رسم نمودار صدا بزنیم. میتوانید از کدهای ذیل استفاده نمائید:
// ایجاد یک پس زمینه رنگی: var c = document.getElementById("c_canvas"); var cxt = c.getContext("2d"); var gradient = cxt.createLinearGradient(0, 0, 800, 320) gradient.addColorStop(0, 'Red'); gradient.addColorStop(.5, 'Yellow'); gradient.addColorStop(1, 'Green'); cxt.fillStyle = gradient; cxt.fillRect(0, 0, 800, 320); cxt.save(); // این سه خط را فعال کرده تا انتقال نمودار چارت سازمانی را مشاهده نمائید. //cxt.scale(-1.1, 1.1); //cxt.translate(-700,-50); //cxt.rotate(0.2); var o = new orgChart(); o.addNode(1, '', '', 'Root node'); o.addNode(2, 1, 'u', 'u-node 1'); o.addNode(3, 1, 'u', 'u-node 2'); o.addNode(4, 1, 'u', 'u-node 3'); o.addNode(5, 1, 'l', 'l-node 1'); o.addNode(6, 1, 'l', 'l-node 2'); o.addNode(7, 1, 'r', 'r-node 1'); o.addNode(8, 1, 'r', 'r-node 2'); o.addNode(9, 1, 'r', 'r-node 3'); o.addNode('', '', '', 'Root 2'); o.addNode('', 'Root 2', 'r', 'using'); o.addNode('', 'Root 2', 'r', 'text as id'); o.drawChart('c_canvas', 'center'); cxt.restore();
نکته : اگر بخواهید رنگ پس زمینه canvas را کامل پر کند (Fill) باید رسم نمودار را دوبار انجام دهید، در ابتدا تعریف یک canvas با امکان پرشونده در صفحه ، و بعد رسم پس زمینه و بعد رسم دوباره canvas .
رنگها
شاخهها میتوانند رنگهای متفاوتی داشته باشند. امکان تعریف رنگ شاخهها بهمراه صدا زدن تابع addNode وجود دارد. اگر رنگی تعریف نشود ، از رنگ پیشفرض استفاده خواهد شد. رنگهای کنونی را با صدا زدن تابع setColor میتوان عوض کرد و تا زمان صدا زدن تابع setColor بعدی از آنها استفاده خواهد شد. همه خطهایی که شاخهها را به هم متصل میکنند فقط یک رنگ مشابه میتوانند داشته باشند.
پارامترهای تابع setColor :
- رنگ خطوط حاشیه ( اختیاری )
- رنگ پرکننده شاخه ( اختیاری )
- رنگ نوشته / عنوان شاخه ( اختیاری )
- رنگ خطوط متصل کننده ( اختیاری ، عمومی )
یک پارامتر خالی رنگ ، تنظیمات کنونی را تغییر نخواهد داد. کد زیر را ویرایش نموده و دوباره صفحه خود را بازخوانی نمائید.
var o = new orgChart(); o.setColor('#99CC99', '#CCFFCC', '#000000', '#FF0000'); o.addNode(0, '', '', 'Root node'); o.setColor('#CCCC66', '#FFFF99'); o.addNode(11, 0, 'u', 'u-node 1'); o.setColor('#000000', '#FFFF99'); o.addNode(12, 0, 'u', 'black border'); o.addNode(13, 0, 'u', 'bold black border', 1); o.setColor('#CC4950', '#FF7C80'); o.addNode(21, 0, 'l', 'l-node 1'); o.addNode(22, 0, 'l', 'l-node 2', 0, 'BLACK', 'RED', 'BLUE'); o.addNode(23, 0, 'l', 'l-node 3'); o.setColor('#CC9966', '#FFCC99'); o.addNode(31, 0, 'r', 'r-node 1'); o.drawChart('c_colors', 'center');