问题描述
我正在尝试在Fusion Chart中实现甘特图。但是，我找不到几个自定义选项。以下是我需要在Fusion Gantt图表上实现的选项，
- 如何自定义或缩小里程碑的大小？
- 如何将Y轴数据标签自定义为超链接？ [参考图片，识别客户，Survey 500客户等标签必须是超链接，这将有助于我们深入到数据级别信息]
- 除了多边形或星形以外，是否可以将里程碑的形状更改为三角形？
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',renderAt: 'chart-container',width: '750',height: '500',dataFormat: 'json',dataSource: {
"chart": {
"theme": "fusion","dateformat": "mm/dd/yyyy","caption": "Social Media Optimization","captionFontSize": "14","subCaption": "Project Plan","subCaptionFontSize": "12","milestoneFont": "Times New Roman","milestoneFontSize": "15","labelLink": "http://www.fusioncharts.com/"
},"categories": [{
"category": [{
"start": "08/01/2014","end": "08/31/2014","label": "Aug '14"
},{
"start": "09/01/2014","end": "09/30/2014","label": "Sep '14"
},{
"start": "10/01/2014","end": "10/31/2014","label": "Oct '14"
},{
"start": "11/01/2014","end": "11/30/2014","label": "Nov '14"
},{
"start": "12/01/2014","end": "12/31/2014","label": "Dec '14"
},{
"start": "01/01/2015","end": "01/31/2015","label": "Jan '15"
},{
"start": "02/01/2015","end": "02/28/2015","label": "Feb '15"
},{
"start": "03/01/2015","end": "03/31/2015","label": "Mar '15"
}]
}],"processes": {
"fontsize": "12","isbold": "1","align": "left","process": [{
"label": "Identify Customers"
},{
"label": "Survey 500 Customers"
},{
"label": "Interpret Requirements"
},{
"label": "Market Analysis"
},{
"label": "Brainstorm concepts"
},{
"label": "Define Ad Requirements"
},{
"label": "Design & Develop"
},{
"label": "Mock test"
},{
"label": "Documentation"
},{
"label": "Start Campaign"
}]
},"tasks": {
"task": [{
"id": "1","start": "08/04/2014","end": "08/10/2014","color": "#000000",},{
"id": "2","start": "08/08/2014","end": "08/19/2014"
},{
"id": "3","start": "08/19/2014","end": "09/02/2014"
},{
"id": "4","start": "08/24/2014",{
"id": "5","start": "09/02/2014","end": "09/21/2014"
},{
"id": "6","start": "09/21/2014","end": "10/06/2014"
},{
"id": "7","start": "10/06/2014","end": "01/21/2015"
},{
"id": "8","start": "01/21/2015","end": "02/19/2015"
},{
"id": "9","start": "01/28/2015","end": "02/24/2015"
},{
"id": "10","start": "02/24/2015","end": "03/27/2015"
}]
},//Adding milestones to task with id 7 and 10
"milestones": {
"milestone": [{
"date": "1/21/2015","taskid": "7","color": "#f8bd19","shape": "star","tooltext": "Successful Completion of Development","label": "Development Complete","color": "#587B17"
},{
"date": "3/28/2015","taskid": "10","tooltext": "Successful Completion of Campaign","label": "Campaign Complete","color": "#4838D2"
}]
}
}
}).render();
});
HTML Code
-->
<div id="chart-container">FusionCharts will render here</div>
解决方法
-
您可以使用“里程碑”对象下的“半径”属性自定义或减小里程碑的大小，例如
appBar: AppBar( title: Text( 'ToDoApp',key: Key("toDoKey"),),backgroundColor: Colors.brown[400], -
您可以使用
radius: 5之类的“过程”对象下的“链接”属性将Y轴数据标签自定义为超链接。该属性支持各种FusionCharts链接格式。 参考： https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down#simple-links -
要将里程碑的形状更改为三角形，您需要将“ shape”属性设置为“ polygon”，并在“里程碑”对象下将“ numSides”属性设置为“ 3”，例如{{1} }