融合甘特图在对标签使用自定义函数时不绘制日期

Question

您好，我想将 json 值显示为我的甘特图标签。所以，我尝试过这样的事情

"processes": {
    "headertext": "Task",
    "align": "left",
    "process": processLabels 
  }

processLabels 具有 returns 一组数组值的功能。简单功能如下

function genChart() {
    var milestones = ["task1","task2","task3"];
    var processLabels = [] 
    for (var i=0;i<=2;i++) {
        processLabels.push({
            "label":  '"'+milestones[i]+'"'  ,
        "id": '"'+i+'"'
        });

    }
    return processLabels;
}

问题是我只得到标签而没有绘制日期

这是我的完整代码：

  <html>
    <head>
      <title>My first chart using FusionCharts Suite XT</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Step 1 - Including the fusioncharts core library -->
      <script type="text/javascript" src=" http://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> 
        <!-- Step 2 - Including the fusion theme -->
        <script type="text/javascript" src=" http://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.theme.fusion.js"></script> 
      <script>
      var processLabels = genChart();
      const dataSource = {
      "chart": {
        "dateformat": "dd/mm/yyyy",
        "caption": "Planned vs Actual",
        "subcaption": "For BigHead v3",
        "plottooltext": "<b>$label</b><br>Start: <b>$start</b><br>End: <b>$end</b>",
        "theme": "fusion"
      },
      "legend": {
        "item": [
          {
            "label": "Planned",
            "color": "#0000AA"
          },
          {
            "label": "Actual",
            "color": "#88D8B0"
          },
          {
            "label": "Slack (Delay)",
            "color": "#e44a00"
          }
        ]
      },
      "tasks": {
        "task": [
          {
            "label": "Planned",
            "processid": "1",
            "start": "5/4/2018",
            "end": "12/4/2018",
            "id": "1-1",
            "color": "#0000AA",
            "alpha": "100",
            "height": "27%",
            "toppadding": "32%"
          },
          {
            "label": "Actual",
            "processid": "1",
            "start": "10/4/2018",
            "end": "29/4/2018",
            "id": "1",
            "color": "#88D8B0",
            "alpha": "100",
            "height": "27%",
            "toppadding": "65%"
          },
          {
            "label": "Planned",
            "processid": "2",
            "start": "10/4/2018",
            "end": "20/4/2018",
            "id": "2-1",
            "color": "#0000AA",
            "alpha": "100",
            "height": "27%",
            "toppadding": "32%"
          },
          {
            "label": "Actual",
            "processid": "2",
            "start": "10/4/2018",
            "end": "22/4/2018",
            "id": "2",
            "color": "#88D8B0",
            "alpha": "100",
            "height": "27%",
            "toppadding": "65%"
          },
          {
            "label": "Planned",
            "processid": "3",
            "start": "21/4/2018",
            "end": "30/4/2018",
            "id": "3-1",
            "color": "#0000AA",
            "alpha": "100",
            "height": "27%",
            "toppadding": "32%"
          },
          {
            "label": "Actual",
            "processid": "3",
            "start": "22/4/2018",
            "end": "1/5/2018",
            "id": "3",
            "color": "#88D8B0",
            "alpha": "100",
            "height": "27%",
            "toppadding": "65%"
          }
        ]
      },
      "processes": {
        "headertext": "Task",
        "align": "left",
        "process": processLabels 
      },
      "categories": [
        {
          "category": [
            {
              "start": "01/04/2018",
              "end": "30/04/2018",
              "label": "April"
            },
            {
              "start": "01/05/2018",
              "end": "31/05/2018",
              "label": "May"
            },
            {
              "start": "1/6/2018",
              "end": "30/6/2018",
              "label": "June"
            }
          ]
        },
        {
          "category": [

          ]
        }
      ]
    };

    FusionCharts.ready(function() {
       var myChart = new FusionCharts({
          type: "gantt",
          renderAt: "chart-container",
          width: "100%",
          height: "100%",
          dataFormat: "json",
          dataSource
       }).render();
    });

    function genChart() {
        var milestones = ["task1","task2","task3"];
        var processLabels = [] 
        for (var i=0;i<=2;i++) {
            processLabels.push({
                "label":  '"'+milestones[i]+'"'  ,
            "id": '"'+i+'"'
            });

        }
        return processLabels;
    }
      </script>
      <body>
      <div id="chart-container"></div>
      </body>
    </head>
    </html>

请告诉我如何解决这个问题。

Answer 1

您没有获得任务栏，因为您正在生成的 processLabels 数组错误地创建了标签和 id 对象值，请从对象中删除空白引号以使其正常工作，这是更新后的实现

function genChart() {
    var milestones = ["task1", "task2", "task3"];
    var processLabels = []
    for (var i = 0; i <= 2; i++) {
      processLabels.push({
        "label": '' + milestones[i] + '',
        "id": '' + i + ''
      });

    }
    return processLabels;
  }

进一步参考此 fiddle - http://jsfiddle.net/Lstj92rh/

融合甘特图在对标签使用自定义函数时不绘制日期

Fusion gantt chart not plotting dates while using custom function for labels

javascript

fusioncharts