javascript - 一些 Raphael 标签没有出现在 Linechart Mouseover 上

标签 javascript raphael graphael

可以看出,第 2、10 和 13 个标签(拉斐尔语言中的标签)不会出现在鼠标悬停在它们各自的图形点上(至少不会出现在可视区域中)。当您添加更多点时,问题会变得更糟(即缺少更多标签)。任何人都知道问题可能是什么?

var r = Raphael("holder"),
   txtattr = {
      font: "12px sans-serif"
   };
r.text(65, 25, "Basis Points").attr(txtattr);

lines = r.linechart(100, 40, 600, 260, [
   [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
], [
   [12, 32, 23, 15, 17, 27, 22, 12, 32, 23, 15, 17, 27]
],
{
   nostroke: false,
   axis: "0 0 1 1",
   symbol: "circle",
   smooth: true
}).hoverColumn(function ()
{
   this.tags = r.set();

   for (var i = 0, ii = this.y.length; i < ii; i++)
   {
      this.tags.push(
        r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this)
        .attr([
        {
           fill: "#fff"
        },
        {
           fill: this.symbols[i].attr("fill")
        }]));
   }
}, function ()
{
   this.tags && this.tags.remove();
});

lines.symbols.attr(
{
   r: 3
});
r.width = 650;

jsfiddle

最佳答案

问题是由于正确计算了悬停列宽度,下面的错误报告中描述了代码修复:

Linechart Column Width Bug

关于javascript - 一些 Raphael 标签没有出现在 Linechart Mouseover 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11710204/

相关文章:

svg - 如何相对于其中心点旋转或缩放(变换)SVG 路径?

path - 将标签放在 SVG 路径的 "center"中

javascript - 删除禁用字段上的括号

javascript - 保持选择的持久性

javascript - 下载 Angular 2 insideHTML 绑定(bind)内的脚本

javascript - 如何更新图像的来源

svg - Graphael 饼图图例重叠

javascript - gRaphael图书馆: Can't Create Line Chart

javascript - 禁用 ng-click HTML DOM 元素