我正在为工作日的开始/结束时间制作图表,并且希望使其可拖动。我找到了如何拖动右侧(endTime)的解决方案,但左侧(startTime)没有选择。 或者,如果您建议使用此图表,还有其他选择。
我尝试在左侧添加另一个项目符号,但看来这不是amcharts中的内置选项。
// That's how I'm handling the drag event
bullet.events.on("drag", event => {
handleDrag(event);
});
bullet.events.on("dragstop", event => {
handleDrag(event);
var dataItem = event.target.dataItem;
dataItem.column.isHover = false;
event.target.isHover = false;
});
function handleDrag(event) {
var dataItem = event.target.dataItem;
var value = valueAxis.xToValue(event.target.pixelX);
dataItem.valueX = value;
dataItem.column.isHover = true;
dataItem.column.hideTooltip();
event.target.isHover = true;
}
答案 0 :(得分:0)
只是找到了我的解决方案。我添加了另一个 Bullet ,并更改了项目符号获取数据的值(我跟随控制台中的对象)。
bullet2.events.on("drag", event => {
handleDrag(event, "start");
});
bullet2.events.on("dragstop", event => {
handleDrag(event, "start");
var dataItem = event.target.dataItem;
dataItem.column.isHover = false;
event.target.isHover = false;
this.openHours.find(x => x.day === dataItem.dataContext.day).startTime = dataItem.openValueX;
});
function handleDrag(event, position) {
var dataItem = event.target.dataItem;
var value = valueAxis.xToValue(event.target.pixelX);
if (position==="start"){
dataItem.openValueX = value;
}else{
dataItem.valueX = value;
}
dataItem.column.isHover = true;
dataItem.column.hideTooltip();
event.target.isHover = true;
}