Javascript 触发鼠标悬停事件时显示图像

我正在使用Canvas.js创建一个甜甜圈类型的图表。 基本上，当鼠标悬停图的一部分时，我想在炸圈饼的中间显示一个图像（每个国家都有自己的图像）。 库中存在mouseover事件，但我似乎无法触发警报以外的任何事件

非常感谢你

链接到JSFIDLE：

第二部分 第二个问题是，我需要对甜甜圈图表的每个部分使用不同的图像

是否有办法要求图书馆区分不同的部分（即法国、意大利、德国

---

再次感谢

您可以调用

mouseover

并使用它返回数据集的值，在本例中，我使用了名称，但您可以将其更改为图例。使用此值可以更新背景图像，如下所示

  data: [
  {
    mouseover: function(e){            
        document.getElementById('chartContainer').style.backgroundImage = "url('" + e.dataPoint.name + ".png')";
    },

您还需要编辑CSS来定位图像，以下内容应该会有所帮助

#chartContainer
{
    background-position:center;
}
.canvasjs-chart-canvas
{
    background-color:transparent !important;
}

我已经更新了你的密码

---

您需要使用开发人员工具查看背景更改，因为我没有将其链接到任何图像。

尝试过吗？我想您错过了一些东西@CognitiveDesire Hum，它会使所有内容消失……这意味着鼠标悬停在工作台上似乎是一个非常好的解决方案！但是，它返回给我这个错误：“解析“background image”的值时出错。声明已删除。“好的，使用

style.backgroundImage=“url（'base.jpeg'）”工作正常。只需要背景不重复：添加CSS
background repeat:no repeat我只是稍微修改了@Jonathan的JSFiddle。这里的Checkout是上一个JSFIDLE中稍微更新的版本，因为事件处理程序附加到dataSeries的mouseover事件，当鼠标直接从一个数据点移动到另一个数据点时，图像没有改变——它要求我们每次移出dataSeries并再次悬停。在当前的示例中，我将事件处理程序附加到各个数据点。
#chartContainer
{
    background-position:center;
}
.canvasjs-chart-canvas
{
    background-color:transparent !important;
}