2

我想使用 HTML5 画布绘制折线图或条形图。

我想

  • 从外部来源获取数据（或硬编码用于测试目的）

  • 画图

  • 将鼠标悬停在节点/栏上，并出现一个工具提示，显示数字/相关数据。

所以我的问题是，可以将工具提示应用于画布上的单个图像/线条/任何东西吗？（我知道画布本身可以有自己的工具提示）

我确信可行的一种解决方案是让每个节点成为一个单独的画布，并带有它自己的工具提示和图像，但这听起来有点过分。

理想情况下，我想使用 jquery.ui.tooltip，但实际上我只是想知道是否有任何效果。

    var imageObj = new Image();
    $(imageObj).attr("title","kitten");
    $(imageObj).tooltip();

    imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY, destWidth, destHeight);
    };
    imageObj.src = "BW-kitten.jpg";

我从这里得到了大纲，并添加了我认为可能可行的内容。

小猫画得很好，没有控制台错误和所有这些好东西。

4

1 回答 1

2

HTML5（因为没有更好的词）形状被绘制到画布上，技术上不存在。有几个插件使用自定义处理程序来管理这些形状的精确位置并添加类似于常规 DOM 元素的功能。

我在我的 HTML5 项目中使用KineticJS，因为它遵循常规形状的简单性，并以简单的方式允许复杂的形状。这是一个 KineticJS 示例，它为它们的形状添加了工具提示。

您可以使用Kinetic.Image文档轻松地将图像添加到您的舞台，并按照之前链接的示例了解如何将工具提示添加到形状。

于 2012-03-23T16:31:51.123 回答