Gantt chart. Elastic javascript gantt chart. Vue gantt. Project manager responsive gantt. jquery gantt.
npm install gantt-elastic-custum-chart
// 新增功能配置
chart: {
text: {
ellipsis: true, // 字体展示在图形上 超出省略展示
style: { // 字体颜色配置
color: '#fff',
wordBreak: 'break-all'
}
}
}
taskList: {
...
columns: [
{
id: 99,
label: 'fixed',
// value: 'test', // value不生效 有render时
fixed: 'right', // 列会靠右侧
width: 90,
render: (val, row) => {
// val 为 value的值, row 是整行数据; render函数可以替换 原有的html:true
return (
编辑
);
}
}
]
}
`
!preview img
!preview img
$3
npm install --save gantt-elastic-custum-chart or download zip from github / clone repo
and if you want default header
npm install --save gantt-elastic-header
`javascript
import Vue from 'vue';
import GanttElastic from "gantt-elastic-custum-chart";
import Header from "gantt-elastic-header"; // if you want standard header (npm i -s gantt-elastic-header)
new Vue({
el:'#gantt',
template:,
components: {
ganttElasticHeader: {template:your header}, // or Header
ganttElastic: GanttElastic
ganttElasticFooter: {template:your footer},
},
data() {
return {
tasks: tasks,
options: options
};
}
});
`
or
`javascript
import Vue from 'vue';
import App from './App.vue'; // your app that uses gantt-elastic from 'gantt-elastic/src/GanttElastic.vue'
new Vue({
el: '#app',
render: h => h(App)
});
``