我正在使用AnyChart 8.1.0资源甘特图（anychart.ganttResource()）来显示和编辑计划数据（汽车预订）。我可以点击一个＆＃34;期间＆＃34; - 使用rowClick事件 - 弹出模式以编辑预订。但现在我也希望通过点击我图表上的某个位置来添加预订。我知道我点击了什么线（车），但我也想预先填写计划期间。
有没有办法确定点击事件执行的时间（开始和/或结束）？
谢谢！ 罗埃尔
答案 0 :(得分：1)
是的，可以使用一些额外的代码。我已经为您准备了一个片段，告诉您如何获得点击时间戳，请尝试一下
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>
答案 1 :(得分：0)
提供的代码有效，但仅当图表以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>