AnyChart 8.1.0 - 资源甘特图 - 确定 rowClick 位置
AnyChart 8.1.0 - Resource Gantt - Determine rowClick location
我正在使用 AnyChart 8.1.0 资源甘特图 (anychart.ganttResource()) 来显示和编辑计划数据（汽车预订）。我可以点击 "period" - 使用 rowClick 事件 - 弹出一个模式来编辑预订。但现在我还想通过单击图表上的某个位置来添加预订。我知道我点击的是什么线路（车），但我也想预填计划的时段。
有没有办法确定点击事件执行的时间（开始and/or结束）？
谢谢！
罗尔
是的，可以使用一些额外的代码。我已经为您准备了一个片段来展示如何获取点击时间戳，请尝试一下
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>
提供的代码有效，但前提是图表以 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>
我正在使用 AnyChart 8.1.0 资源甘特图 (anychart.ganttResource()) 来显示和编辑计划数据（汽车预订）。我可以点击 "period" - 使用 rowClick 事件 - 弹出一个模式来编辑预订。但现在我还想通过单击图表上的某个位置来添加预订。我知道我点击的是什么线路（车），但我也想预填计划的时段。
有没有办法确定点击事件执行的时间（开始and/or结束）？
谢谢！ 罗尔
是的，可以使用一些额外的代码。我已经为您准备了一个片段来展示如何获取点击时间戳，请尝试一下
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>
提供的代码有效，但前提是图表以 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>