Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-doc/content/acomp/component/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

# TreeChart

## [<span class="mdi mdi-link-variant"></span>Demo](https://absol.cf/libs/absol-acomp/demo/treechart.html)

## props 

| Tên             | Kiểu dữ liệu | Chú thích                                                                           |
|-----------------|--------|-------------------------------------------------------------------------------------|
| maxHorizonLevel | `number` | Nhận giá trị từ 0-Inf, level tối đa dùng hiển thị theo chiều ngang. tính từ level 0 |
| data            |     `TreeChartData` | Dữ liệu dạng cây                                                                    |                                                                   |  


## Kiểu dữ liệu

### TreeChartData 

| Tên  | Kiểu dữ liệu                              | Chú thích                                             |
|------|-------------------------------------------|-------------------------------------------------------|
| name | `string`                                  | Tên của node, tùy chọn                                |
| text | `string`                                  | Text hiển thị, nếu không có thì dùng name để hiển thị |
| item | `Array<TreeChartData>`                    | Dữ liệu các node con, có thể null hoặc mảng rỗng      |
| fill | `string / Color`                          | Màu của node                                          |
| icon | `AbsolConstructDescriptor` hoặc `Element` | icon                                                  |

> Có thể dùng dữ liệu dạng {text, items...} tương tự SelectTreeMenu 

## Ví dụ

```js

var data = {
    text:"A",
    items:[
        {text:'B'},
        {
            text:'C',
            icon:'span.mdi.mdi-account',
            fill: 'red',
            items:[
                {text:'E'},
                {text:'F'}
            ]
        },
        {text:'D'},
    ]
}

var chart = _({
    tag: 'treechart',
    props: {
        data: data,
        maxHorizonLevel: 2
    }
});
document.body.appendChild(chart);
```