如何在ganttResource anychart 8.1.0中的句点上设置标签

Question

嗨，我想在一个时期贴上标签 如果我使用版本7.7.0，我可以使用它来实现它： http://jsfiddle.net/NightKaos/nd5nwb1s/3/

{
    "id": "1",
    "name": "Phase 1 - Strategic Plan",
    "periods": [
      {
          "id": "1_1", 
          "start": 1171468800000, 
          "end": 1171906900000, 
          "fill": "#00FF33",
          "progressValue": "25%",
           'label': {
            "value": 'Custom Label ',
            'anchor': 'center',
            'position': 'center',
            'hAlign': 'center'
          },

      }

如何在8.1.0版本上执行此操作？ 我可以访问任务名称，但不能访问期间数据。

我在这里有一个样本： https://jsfiddle.net/NightKaos/zffqhz74/2/

Answer 1

您可以像在7.7.0中一样，从8.1.0中的数据设置标签文本和属性 请查看以下示例

// set label object to configure labels in periods
var data = [
    {
        "id": "1",
        "name": "Period 1",
        "periods": [
            {
                "id": "1_1",
                "start": 1171468800000,
                "end": 1171987200000,
                "label" : {
                    "format":"Label 1 in the center",
                    "anchor": "center",
                    "position": "center"
                }
            }]
    },
    {
        "id": "2",
        "name": "Period 2",
        "periods": [
            {
                "id": "1_2",
                "start": 1171668800000,
                "end": 1171887200000,
                "label" : {
                    "format":"Label 2 in the center",
                    "anchor": "center",
                    "position": "center"
                }
            }]
    }
];

anychart.onDocumentReady(function () {

    var treeData = anychart.data.tree(data, "as-table");

    chart = anychart.ganttResource();
    chart.container("container");
    chart.bounds(0, 0, "100%", "100%");
    chart.data(treeData);
    chart.splitterPosition(170);

    var dataGrid = chart.dataGrid();

    // settings for first column
    dataGrid.column(0).width(30).title().text("#");
    // settings for the second column
    dataGrid.column(1).width(140).format(function (item) {
        return item.get("name");
    }).title().text("Person");

//enable period labels
chart.getTimeline().baseLabels(true);

    chart.draw();
    chart.fitAll();
});

html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" />
    
        <div id="container"></div>