AnyChart 8.1.0 - Resource Gantt - Определение местоположения rowClick

Я использую ресурс AnyChart 8.1.0 Ганта (anychart.ganttResource()) для отображения и редактирования плановых данных (бронирования автомобилей). Я могу поймать щелчок по «периоду» — используя событие rowClick — чтобы открыть модальное окно для редактирования бронирования. Но теперь я также хотел бы добавить оговорку, щелкнув место на моей карте. Я знаю, на какую строку (автомобиль) я нажимаю, но я также хотел бы предварительно заполнить запланированный период.

Есть ли способ определить время (начало и/или конец), когда выполняется событие клика?

Спасибо! Роэль


anychart
person Roel    schedule 20.02.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Да, это возможно с дополнительным кодом. Я подготовил для вас фрагмент, чтобы показать, как вы можете получить метку времени клика, пожалуйста, попробуйте.

anychart.onDocumentReady(function () {
    var data = getData();

    // Creates Gantt Resource chart.
    var chart = anychart.ganttResource();
    chart.data(data, "as-table");

    chart.title("Click anywhere in timeline area");
    chart.container("container").draw();
    chart.fitAll();
  
  //required variables
  var timeline = chart.getTimeline();
  var scale = chart.xScale();
  var getRange = 0;
  var gap = 0;
  var ratioClick = 0;
  var dateClick = 0;
  
  //mouse click listener
  chart.listen('rowClick', function(e) {
    //get timeline visible range
    getRange = scale.getRange();
    gap = getRange.max - getRange.min;
    //calculate coordinate of click
   ratioClick = (e.originalEvent.clientX - timeline.bounds().left()) / (timeline.width());
    //calculate a timestamp related to the click
    dateClick = +(ratioClick * gap + getRange.min).toFixed(0);
 
    //show result to chart title and browser console
    chart.title(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
    console.log(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
  });

    function getData() {
        return [
            {
                "id": "1",
                "name": "Server 1",
                "broken": "11%",
                "maintance": "20%",
                "working": "69%",
                "periods": [
                    {
                        "id": "1_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201934691000
                    },
                    {
                        "id": "1_2",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201934691000,
                        "end": 1201997175000
                    },
                    {
                        "id": "1_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201997175000,
                        "end": 1202304539000
                    },
                ]
            },
            {
                "id": "2",
                "name": "Server 2",
                "broken": "9%",
                "maintance": "25%",
                "working": "66%",
                "periods": [
                    {
                        "id": "2_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201859302000
                    },
                    {
                        "id": "2_2",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "red",
                        "hoverStroke": "cyan",
                        "start": 1201859302000,
                        "end": 1201908412000
                    },
                    {
                        "id": "2_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201908412000,
                        "end": 1201974133000
                    },
                    {
                        "id": "2_4",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201974133000,
                        "end": 1202028840000
                    },
                ]
            }
        ];
    }
});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>

person AnyChart Support    schedule 21.02.2018

arrow_upward
0
arrow_downward

Предоставленный код работал, но только если диаграмма отображалась со 100% шириной без полей. Чтобы обрабатывать диаграммы/контейнеры, которые отображаются внутри div в другом месте страницы, вы должны вычесть x-позицию контейнера (chart.container().getContainerElement().getBoundingClientRect().x) из позиции, по которой щелкнули.

anychart.onDocumentReady(function () {
    var data = getData();

    // Creates Gantt Resource chart.
    var chart = anychart.ganttResource();
    chart.data(data, "as-table");

    chart.title("Click anywhere in timeline area");
    chart.container("container").draw();
    chart.fitAll();
  
  //required variables
  var timeline = chart.getTimeline();
  var scale = chart.xScale();
  var getRange = 0;
  var gap = 0;
  var ratioClick = 0;
  var dateClick = 0;
  
  //mouse click listener
  chart.listen('rowClick', function(e) {
    //get timeline visible range
    getRange = scale.getRange();
    gap = getRange.max - getRange.min;
    //calculate coordinate of click
   ratioClick = (e.originalEvent.clientX - chart.container().getContainerElement().getBoundingClientRect().x - timeline.bounds().left()) / (timeline.width());
    //calculate a timestamp related to the click
    dateClick = +(ratioClick * gap + getRange.min).toFixed(0);
 
    //show result to chart title and browser console
    chart.title(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
    console.log(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
  });

    function getData() {
        return [
            {
                "id": "1",
                "name": "Server 1",
                "broken": "11%",
                "maintance": "20%",
                "working": "69%",
                "periods": [
                    {
                        "id": "1_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201934691000
                    },
                    {
                        "id": "1_2",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201934691000,
                        "end": 1201997175000
                    },
                    {
                        "id": "1_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201997175000,
                        "end": 1202304539000
                    },
                ]
            },
            {
                "id": "2",
                "name": "Server 2",
                "broken": "9%",
                "maintance": "25%",
                "working": "66%",
                "periods": [
                    {
                        "id": "2_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201859302000
                    },
                    {
                        "id": "2_2",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "red",
                        "hoverStroke": "cyan",
                        "start": 1201859302000,
                        "end": 1201908412000
                    },
                    {
                        "id": "2_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201908412000,
                        "end": 1201974133000
                    },
                    {
                        "id": "2_4",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201974133000,
                        "end": 1202028840000
                    },
                ]
            }
        ];
    }
});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>

person Roel    schedule 26.02.2018