RGraph 中水平条值为 0 时无法单击
unable to click when horizontal bar value is 0 in RGraph
我在 Angular 7 应用程序中使用 RGraph。
使用水平条形图时,当条形值为零时我无法点击。
我试过 tooltipsHotspotYonly: true 和 tooltipsHotspotXonly: true
如果有人对此有答案,请告诉我。
条形图有 工具提示 HotspotXOnly 来促进这一点。但是 HBar 没有这样的 属性 - 所以我在 - tooltipsHotspotYOnly 中添加了一个。替换 getShape() 函数是这样的:
//
// This function can be used to get the appropriate bar information (if any)
//
// @param e Event object
// @return Appriate bar information (if any)
//
this.getShape = function (e)
{
var mouseXY = RGraph.getMouseXY(e);
//
// Loop through the bars determining if the mouse is over a bar
//
for (var i=0,len=this.coords.length; i<len; i++) {
var mouseX = mouseXY[0], // In relation to the canvas
mouseY = mouseXY[1], // In relation to the canvas
left = this.coords[i][0],
top = this.coords[i][1],
width = this.coords[i][2],
height = this.coords[i][3],
idx = i;
// Recreate the path/rectangle so that it can be tested
// ** DO NOT STROKE OR FILL IT **
if (properties.tooltipsHotspotYonly) {
this.path(
'b r % % % %',
this.marginLeft, top, this.canvas.width - this.marginRight - this.marginLeft, height
);
} else {
this.path(
'b r % % % %',
left,top,width,height
);
}
if (this.context.isPointInPath(mouseX, mouseY)) {
if (RGraph.parseTooltipText) {
var tooltip = RGraph.parseTooltipText(properties.tooltips, i);
}
var indexes = RGraph.sequentialIndexToGrouped(idx, this.data);
var group = indexes[0];
var index = indexes[1];
return {
object: this,
x: left,
y: top,
width: width,
height: height,
sequentialIndex: idx,
dataset: group,
index: index,
label: properties.yaxisLabels && typeof properties.yaxisLabels[group] === 'string' ? properties.yaxisLabels[group] : null,
tooltip: typeof tooltip === 'string' ? tooltip : null
};
}
}
};
现在您可以:
如果您喜欢编辑 HBar 库,请在此处获取代码并
替换 RGraph.hbar.js 文件中的 getShape() 函数。
从这里下载更新的库:
https://www.rgraph.net/tests/canvas.hbar/RGraph.hbar.js
(它将保留到至少下一个版本可用 - 到那时
您可以从标准 RGraph 获取新的 HBar 库
下载:https://www.rgraph.net/download.html#stable )
等到 5.27 版本出来,tooltipsHotspotYOnly
选项它将成为 RGraph 的一部分(使用上面的 link)。
我在 Angular 7 应用程序中使用 RGraph。
使用水平条形图时,当条形值为零时我无法点击。
我试过 tooltipsHotspotYonly: true 和 tooltipsHotspotXonly: true
如果有人对此有答案,请告诉我。
条形图有 工具提示 HotspotXOnly 来促进这一点。但是 HBar 没有这样的 属性 - 所以我在 - tooltipsHotspotYOnly 中添加了一个。替换 getShape() 函数是这样的:
//
// This function can be used to get the appropriate bar information (if any)
//
// @param e Event object
// @return Appriate bar information (if any)
//
this.getShape = function (e)
{
var mouseXY = RGraph.getMouseXY(e);
//
// Loop through the bars determining if the mouse is over a bar
//
for (var i=0,len=this.coords.length; i<len; i++) {
var mouseX = mouseXY[0], // In relation to the canvas
mouseY = mouseXY[1], // In relation to the canvas
left = this.coords[i][0],
top = this.coords[i][1],
width = this.coords[i][2],
height = this.coords[i][3],
idx = i;
// Recreate the path/rectangle so that it can be tested
// ** DO NOT STROKE OR FILL IT **
if (properties.tooltipsHotspotYonly) {
this.path(
'b r % % % %',
this.marginLeft, top, this.canvas.width - this.marginRight - this.marginLeft, height
);
} else {
this.path(
'b r % % % %',
left,top,width,height
);
}
if (this.context.isPointInPath(mouseX, mouseY)) {
if (RGraph.parseTooltipText) {
var tooltip = RGraph.parseTooltipText(properties.tooltips, i);
}
var indexes = RGraph.sequentialIndexToGrouped(idx, this.data);
var group = indexes[0];
var index = indexes[1];
return {
object: this,
x: left,
y: top,
width: width,
height: height,
sequentialIndex: idx,
dataset: group,
index: index,
label: properties.yaxisLabels && typeof properties.yaxisLabels[group] === 'string' ? properties.yaxisLabels[group] : null,
tooltip: typeof tooltip === 'string' ? tooltip : null
};
}
}
};
现在您可以:
如果您喜欢编辑 HBar 库,请在此处获取代码并 替换 RGraph.hbar.js 文件中的 getShape() 函数。
从这里下载更新的库:
https://www.rgraph.net/tests/canvas.hbar/RGraph.hbar.js
(它将保留到至少下一个版本可用 - 到那时 您可以从标准 RGraph 获取新的 HBar 库 下载:https://www.rgraph.net/download.html#stable )
等到 5.27 版本出来,tooltipsHotspotYOnly 选项它将成为 RGraph 的一部分(使用上面的 link)。