Javascript 如何自定义fusion甘特图？

我正在尝试在Fusion图表中实现甘特图。但是，我找不到几个定制选项。以下是我需要在Fusion甘特图上实施的选项

如何自定义或减小里程碑的大小

如何将Y轴数据标签自定义为超链接？[参考图片，标识客户、调查500名客户等标签必须是超链接，这将帮助我们深入到数据级信息]

是否有任何可能的方法将里程碑的形状更改为多边形或星形以外的三角形

FusionCharts.ready（函数（）{
var smoPlan=新的FusionCharts({
键入：“甘特图”，
renderAt:'图表容器'，
宽度：'750'，
高度：'500'，
dataFormat:'json'，
数据源：{
“图表”：{
“主题”：“融合”，
“日期格式”：“mm/dd/yyyy”，
“标题”：“社交媒体优化”，
“captionFontSize”：“14”，
“子选项”：“项目计划”，
“子选项字体大小”：“12”，
“milestoneFont”：“新罗马时代”，
“milestoneFontSize”：“15”，
“标签链接”：http://www.fusioncharts.com/"
},
“类别”：[{
“类别”：[{
“开始”：“2014年1月8日”，
“结束”：“2014年8月31日”，
“标签”：“2014年8月”
}, {
“开始”：“2014年1月9日”，
“结束”：“2014年9月30日”，
“标签”：“2014年9月”
}, {
“开始”：“2014年1月10日”，
“结束”：“2014年10月31日”，
“标签”：“2014年10月”
}, {
“开始”：“2014年1月11日”，
“结束”：“2014年11月30日”，
“标签”：“2014年11月”
}, {
“开始”：“2014年1月12日”，
“结束”：“2014年12月31日”，
“标签”：“2014年12月”
}, {
“开始”：“2015年1月1日”，
“结束”：“2015年1月31日”，
“标签”：“2015年1月”
}, {
“开始”：“2015年1月2日”，
“结束”：“2015年2月28日”，
“标签”：“2月15日”
}, {
“开始”：“2015年1月3日”，
“结束”：“2015年3月31日”，
“标签”：“2015年3月”
}]
}],
“过程”：{
“字体大小”：“12”，
“isbold”：“1”，
“对齐”：“左”，
“过程”：[{
“标签”：“识别客户”
}, {
“标签”：“调查500名客户”
}, {
“标签”：“解释要求”
}, {
“标签”：“市场分析”
}, {
“标签”：“头脑风暴概念”
}, {
“标签”：“定义广告要求”
}, {
“标签”：“设计与开发”
}, {
“标签”：“模拟测试”
}, {
“标签”：“文件”
}, {
“标签”：“启动活动”
}]
},
“任务”：{
“任务”：[{
“id”：“1”，
“开始”：“2014年4月8日”，
“结束”：“2014年10月8日”，
“颜色”：“000000”，
}, {
“id”：“2”，
“开始”：“2014年8月8日”，
“结束”：“2014年8月19日”
}, {
“id”：“3”，
“开始”：“08/19/2014”，
“结束”：“2014年2月9日”
}, {
“id”：“4”，
“开始”：“2014年8月24日”，
“结束”：“2014年2月9日”
}, {
“id”：“5”，
“开始”：“2014年2月9日”，
“结束”：“2014年9月21日”
}, {
“id”：“6”，
“开始”：“2014年9月21日”，
“结束”：“2014年6月10日”
}, {
“id”：“7”，
“开始”：“2014年6月10日”，
“结束”：“2015年1月21日”
}, {
“id”：“8”，
“开始”：“2015年1月21日”，
“结束”：“2015年2月19日”
}, {
“id”：“9”，
“开始”：“2015年1月28日”，
“结束”：“2015年2月24日”
}, {
“id”：“10”，
“开始”：“2015年2月24日”，
“结束”：“2015年3月27日”
}]
},
//向id为7和10的任务添加里程碑
“里程碑”：{
“里程碑”：[{
“日期”：“2015年1月21日”，
“taskid”：“7”，
“颜色”：“f8bd19”，
“形状”：“星星”，
“工具文字”：“成功完成开发”，
“标签”：“开发完成”，
“颜色”：“#587B17”
}, {
“日期”：“2015年3月28日”，
“taskid”：“10”，
“颜色”：“f8bd19”，
“形状”：“星星”，
“工具文字”：“成功完成活动”，
“标签”：“活动完成”，
“颜色”：“#4838D2”
}]
}
}
}).render（）；
});
HTML代码
-->
FusionCharts将在此处渲染

您可以使用“里程碑”对象下的“半径”属性（如

radius:5

通过使用“处理”对象下的“链接”属性，如

链接，可以将Y轴数据标签自定义为超链接：https://www.fusioncharts.com/“

。此属性支持各种FusionCharts链接格式。 参考：

要将里程碑的形状更改为三角形，需要将“形状”属性设置为“多边形”，并将“里程碑”对象下的“numSides”属性设置为“3”，如

numSides:3

参考样品：

    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",
          "end": "09/02/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",
          "color": "#f8bd19",
          "shape": "star",
          "tooltext": "Successful Completion of Campaign",
          "label": "Campaign Complete",
          "color": "#4838D2"
        }]
      }


    }
  }).render();
});

HTML Code
 -->
<div id="chart-container">FusionCharts will render here</div>