使用FusionCharts在Vue界面上动态获取数据生成甘特图
程序员文章站
2022-05-22 12:41:48
...
话不多说先上图
效果就是这个效果，好不好看另说，反正基本功能是有了。可以根据后台传入的数据列表动态生成甘特图。
先说说为什么选FusionCharts来做甘特图吧
前几天在网上百度了一圈，发现echarts都没有甘特图的官方实例，highcharts倒是有，不过那图不忍直视。
偶然间发现这个可以做甘特图，进官网一看发现图挺美观的，而且官方还提供了多种甘特图实例，还集成了不同的前端框架，真是天助我也！
FusionCharts官网：https://www.fusioncharts.com/
API：https://www.fusioncharts.com/dev/chart-attributes/
一、在Vue中集成FusionCharts
先在Vue项目中装插件
npm install fusioncharts vue-fusioncharts --save
二、main.js文件中全局引入
// 必须引入 vue-fusioncharts 和 fusioncharts
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts/core';
// 可选，引入扁平画主题
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'
/* 重点： 想显示图形，必须引入对应图形类型模块 */
//比如 想做个饼图，需要引入pie2d模块
import Pie2D from 'fusioncharts/viz/pie2d'
//我要做的是甘特图，那么我得引入gantt 不知道就去官方示例js代码的type中查看
import gantt from 'fusioncharts/viz/gantt'
/* 引入完成下一步就需要放入Vue中，如下 */
Vue.use(VueFusionCharts, FusionCharts,FusionTheme, Pie2D, gantt);// 添加多个类型图形，就在后面添加上
三、在需要显示的页面中使用官方提供的组件
官方简单甘特图例子：https://www.fusioncharts.com/charts/gantt-charts/simple-gantt-chart?framework=vue
上面图中有不同前端框架使用的例子
官方提供的组件和数据
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
></fusioncharts>
vue中的data数据
type: "gantt",
width: "100%",
// height: "30%", //高度
dataFormat: "json",
dataSource: {
chart: {
dateformat: "mm/dd/yyyy",
caption: "Event Planning Process",
theme: "fusion",
canvasborderalpha: "40",
ganttlinealpha: "50"
},
tasks: {
color: "#5D62B5",
task: [
{
start: "03/07/2018",
end: "03/17/2018"
},
{
start: "03/14/2018",
end: "03/28/2018"
},
{
start: "03/15/2018",
end: "03/31/2018"
},
{
start: "04/02/2018",
end: "04/12/2018"
},
{
start: "04/12/2018",
end: "04/30/2018"
},
{
start: "04/20/2018",
end: "05/06/2018"
},
{
start: "04/30/2018",
end: "05/10/2018"
},
{
start: "04/30/2018",
end: "05/25/2018"
},
{
start: "05/04/2018",
end: "06/05/2018"
}
]
},
processes: {
headertext: "Task",
headeralign: "left",
fontsize: "14",
isbold: "0",
align: "left",
process: [
{
label: "Define event goals"
},
{
label: "Source venue options"
},
{
label: "Finalize speaker reach out list"
},
{
label: "Compose sponsorship strategy"
},
{
label: "Reach out to sponsors"
},
{
label: "Create social media campaign"
},
{
label: "Reach out to blogs for backlinks"
},
{
label: "Optimize SEO ranking"
},
{
label: "Publish event lead up vlog series"
}
]
},
categories: [
{
category: [
{
start: "03/05/2018",
end: "03/31/2018",
label: "March"
},
{
start: "04/01/2018",
end: "04/30/2018",
label: "April"
},
{
start: "05/01/2018",
end: "05/31/2018",
label: "May"
},
{
start: "06/01/2018",
end: "06/10/2018",
label: "June"
}
]
},
{
category: [
{
start: "03/05/2018",
end: "03/11/2018",
label: "W 1"
},
{
start: "03/12/2018",
end: "03/18/2018",
label: "W 2"
},
{
start: "03/19/2018",
end: "03/25/2018",
label: "W 3"
},
{
start: "03/26/2018",
end: "04/01/2018",
label: "W 4"
},
{
start: "04/02/2018",
end: "04/08/2018",
label: "W 5"
},
{
start: "04/09/2018",
end: "04/15/2018",
label: "W 6"
},
{
start: "04/16/2018",
end: "04/22/2018",
label: "W 7"
},
{
start: "04/23/2018",
end: "04/29/2018",
label: "W 8"
},
{
start: "04/30/2018",
end: "05/06/2018",
label: "W 9"
},
{
start: "05/07/2018",
end: "05/13/2018",
label: "W 10"
},
{
start: "05/14/2018",
end: "05/20/2018",
label: "W 11"
},
{
start: "05/21/2018",
end: "05/27/2018",
label: "W 12"
},
{
start: "05/28/2018",
end: "06/03/2018",
label: "W 13"
},
{
start: "06/04/2018",
end: "06/10/2018",
label: "W 14"
}
]
}
]
}
引入了数据和组件，那么现在在Vue界面就可以看见图形了
基本介绍就是这样了，大家可以去试试了。
---------------分--------------------割-------------------线---------------
我的需求
好，现在我来说说我的需求。现在页面的数据是写死的，不能动态变化，而且我需要的不止一个甘特图，有多少个项目就要显示几个图
首先，甘特图的显示是由官方主键来控制的，我的要求是根据项目数量动态生成多个图表。于是我在外层加了个v-for循环。
<template v-for="item in myChart">
<fusioncharts :type="item.type" :width="item.width" :height="item.height"
:dataFormat="item.dataFormat" :dataSource="item.dataSource"></fusioncharts>
</template>
每一个图对应下方一个对象数据，我在方法里面组装好json数据，赋值给myChart，循环就ok了
myChart的基本格式如下
{
type: "gantt",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource:{}
},
{
type: "gantt",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource:{}
},
{
type: "gantt",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource:{}
}
我贴出组装json数据的代码，有需要的小伙伴自行查看
说明：
data中关注list和myChart
methods中关注两个工具方法dateDiff() addDate() 和 主要的方法unPublished()
export default {
name: "versionFusionCharts",
components: {},
data() {
return {
msgShow: true,
list: [],
myChart: [],
value1: true,
value2: true,
}
},
mounted: function () {
let self = this;
setTimeout(function () {
self.global.$on(self.versionFusionCharts, function (data) {
self.unPublished();
});
}, 150);
self.unPublished();
},
methods: {
//页面跳转
jump() {
this.$router.push( '/iframe/devProgress');
},
//计算日期天数差的函数，通用
dateDiff(firstDate,secondDate){
var firstDate = new Date(firstDate);
var secondDate = new Date(secondDate);
var diff = Math.abs(firstDate.getTime() - secondDate.getTime())
var result = parseInt(diff / (1000 * 60 * 60 * 24));
return result
},
//日期加减计算
addDate(date, days) {
var d = new Date(date);
d.setDate(d.getDate() + days);
var m = d.getMonth() + 1;
return d.getFullYear() + '-' + m + '-' + d.getDate();
} ,
unPublished() {
let self = this;
let param = {pageSize: 1, pageNum: 50};
self.dataLoadding = true;
axios.post('/versionList/getUnPublishedVersionListByProject', qs.stringify(param)).then(function (res) {
if (res.data.success) {
self.list = res.data.data.list;
var listArr = [];
var q = 0;
var tempListArr = [];
tempListArr = self.list;
for (var k=0; k<tempListArr.length; k++){
if (tempListArr[k].name.search("常规版本") !== -1){//只需要常规版本
console.log(tempListArr[k].name);
listArr[q++] = tempListArr[k];
}
}
var myChartArr = [];//定义空数组用来装每个图数据对象
for (var i = 0; i < listArr.length; i++) {
//这里存在问题 日期格式yyyy-mm-dd
var starDate = listArr[i].starDate;//版本启动日期 需求结束时间
var frozenDate = listArr[i].frozenDate;//版本冻结日期
var releaseDate = listArr[i].releaseDate;//版本上线
var name = listArr[i].name;//版本名称，即甘特图名称
var demandStartTime = self.$options.methods.addDate(starDate, -7);//需求开始时间
var demandDevStartTime = self.$options.methods.addDate(starDate, 1);//需求开发开始时间
var demandDevEndTime = self.$options.methods.addDate(releaseDate, -1);//需求开发结束时间
var versionStartTime = self.$options.methods.addDate(demandStartTime, 0); //甘特图上显示的开始时间
var versionEndTime = self.$options.methods.addDate(releaseDate, 1); //甘特图上显示的结束时间
var strTime = versionStartTime.substring(5);
var days = self.$options.methods.dateDiff(versionStartTime, versionEndTime);//开始到结束总共多少天
var chartObjGantt = {};//甘特图数据对象
var dataSourceObj = {};//甘特图dataSource数据对象
var chartObj = {};//甘特图dataSource下的chart数据对象
var tasksObj = {};//甘特图dataSource下的tasks数据对象
var processesObj = {};//甘特图dataSource下的processes数据对象
var categoriesArr = [];//甘特图dataSource下的categories数据数组
var taskArr = [];//甘特图dataSource下的tasks中task数组
var processArr = [];//甘特图dataSource下的processes中process数组
var categoryArr = [];//甘特图dataSource下的categories中category数组
/* categoryArr 里面的时间要动态生成啊 且动态变化 */
for (var j=0; j<days; j++){
var categoryObjTemp1 = {};
var time = self.$options.methods.addDate(versionStartTime,j );
var labelTime = time.substring(5);// 将 yyyy-mm-dd 变为 mm-dd
categoryObjTemp1["start"] = time;
categoryObjTemp1["end"] = time;
categoryObjTemp1["label"] = labelTime;//显示 mm-dd格式
categoryArr.push(categoryObjTemp1);
}
var categoryObjTemp = {};
categoryObjTemp["category"] = categoryArr;
categoriesArr.push(categoryObjTemp);
var processArrprocessObj1 = {};
processArrprocessObj1["label"] = "需求收集";//需求收集
var processArrprocessObj2 = {};
processArrprocessObj2["label"] = "版本启动";//版本启动
var processArrprocessObj3 = {};
processArrprocessObj3["label"] = "需求开发";//版本启动
var processArrprocessObj4 = {};
processArrprocessObj4["label"] = "需求冻结";//版本启动
var processArrprocessObj5 = {};
processArrprocessObj5["label"] = "需求上线";//版本启动
processArr.push(processArrprocessObj1);
processArr.push(processArrprocessObj2);
processArr.push(processArrprocessObj3);
processArr.push(processArrprocessObj4);
processArr.push(processArrprocessObj5);
processesObj["width"] = "100%";
processesObj["headertext"] = "";
processesObj["headeralign"] = "left";
processesObj["fontsize"] = "14";
processesObj["align"] = "center";
processesObj["process"] = processArr;
var taskArrTaskObj1 = {};
taskArrTaskObj1["start"] = demandStartTime;//需求收集开始时间 启动时间前7天
taskArrTaskObj1["end"] = self.$options.methods.addDate(starDate, -1);//需求收集结束时间
taskArrTaskObj1["color"] = "#409EFF";//显示颜色
var taskArrTaskObj2 = {};
taskArrTaskObj2["start"] = self.$options.methods.addDate(starDate, -1);//版本启动时间
taskArrTaskObj2["end"] = starDate;//版本启动时间
var taskArrTaskObj3 = {};
taskArrTaskObj3["start"] = starDate;//需求开发时间
taskArrTaskObj3["end"] = demandDevEndTime;//版本启动时间
taskArrTaskObj3["color"] = "#41B883";//显示颜色
var taskArrTaskObj4 = {};
taskArrTaskObj4["start"] = self.$options.methods.addDate(frozenDate, -1);//活动冻结期
taskArrTaskObj4["end"] = releaseDate;//活动冻结期结束时间(版本上线日期)
taskArrTaskObj4["color"] = "#E22018";//显示颜色
var taskArrTaskObj5 = {};
taskArrTaskObj5["start"] = self.$options.methods.addDate(releaseDate, -1);//版本上线日期
taskArrTaskObj5["end"] = releaseDate;//版本上线日期
taskArrTaskObj5["color"] = "#FFD801";//显示颜色
taskArr.push(taskArrTaskObj1);
taskArr.push(taskArrTaskObj2);
taskArr.push(taskArrTaskObj3);
taskArr.push(taskArrTaskObj4);
taskArr.push(taskArrTaskObj5);
tasksObj["color"] = "#5D62B5";
tasksObj["task"] = taskArr;
chartObj['dateformat'] = "yyyy-mm-dd";
chartObj['caption'] = name; //版本名称，即甘特图名称
chartObj['theme'] = "fusion";
chartObj['canvasborderalpha'] = "40";
chartObj['ganttlinealpha'] = "50";
//将属性添加至dataSource对象中
dataSourceObj['chart'] = chartObj;
dataSourceObj['tasks'] = tasksObj;
dataSourceObj['processes'] = processesObj;
dataSourceObj['categories'] = categoriesArr;
//将最外层四个属性添加至对象中
chartObjGantt['type'] = "gantt";
chartObjGantt['width'] = "100%";
chartObjGantt['dataFormat'] = "json";
chartObjGantt['dataSource'] = dataSourceObj;
myChartArr.push(chartObjGantt);
}
self.myChart = myChartArr;
} else {
self.$eroMsg(res.data.info);
}
self.dataLoadding = false;
});
} ,
}
}
上一篇： 在Word2010文档中设置剪贴画尺寸