如何定制融合甘特图？

Question

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

如何自定义或缩小里程碑的大小？
如何自定义Y轴数据标签为超链接？【参考图片，识别客户、调查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",
          "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>

Answer 1

您可以使用“里程碑”对象下的“半径”属性来自定义或减小里程碑的大小，例如
```
radius: 5
```
您可以使用“process”对象下的“link”属性将Y轴数据标签自定义为超链接，如
```
link: "https://www.fusioncharts.com/"
```
。该属性支持各种 FusionCharts 链接格式。参考： https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down#simple-links
要将里程碑的形状更改为三角形，您需要将“里程碑”对象下的“shape”属性设置为“polygon”，并将“numSides”属性设置为“3”，如
```
numSides: 3
```

参考示例：http://jsfiddle.net/srishti_fc/w9bnt24L/3/

Answer 2

您可以自定义或缩小和更改里程碑的形状，请参阅此处

    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"
      },
      "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"
        }, {
          "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",
          "numSides": "3",
          // "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();
});

JsFiddle

如何定制融合甘特图？

问题描述投票：0回答：2

2个回答

最新问题

如何定制融合甘特图？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2