Как я могу установить метки для периодов в любой диаграмме ganttResource 8.1.0

Привет, я хочу поставить метку на точку. Если я использую версию 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/


gantt-chart anychart
person NightKaos    schedule 21.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете установить текст и свойства метки из данных в версии 8.1.0 так же, как вы делали это в версии 7.7.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>

person AnyChart Support    schedule 28.02.2018
comment
Большое спасибо за ответ :) Поддержка @AnyChart - person NightKaos; 06.03.2018