触发mouseover事件时显示图像
触发mouseover事件时显示图像
提问于 2014-01-10 16:31:55
我正在使用Canvas.js创建一个甜甜圈类型的图表。基本上，当鼠标悬停在图的一部分时，我想在甜甜圈中间显示一个图像(每个国家都有自己的图像)。
mouseover事件存在于库中，但我似乎只能触发警报。
非常感谢。
链接到JSFiddle：http://jsfiddle.net/83gxL/
var chart = new CanvasJS.Chart("chartContainer",
{
data: [
{
type: "doughnut",
startAngle: 60,
showInLegend: true,
dataPoints: [
{ y: 80500000, label: "Germany", legendText: "Germany" },
{ y: 66000000, label: "France", legendText: "France" },
{ y: 63200000, label: "UK", legendText: "UK" },
{ y: 38500000, label: "Poland", legendText: "Poland" },
{ y: 59700000, label: "Italy", legendText: "Italy" },
{ y: 46700000, label: "Spain", legendText: "Spain" },
{ y: 20100000, label: "Romania", legendText: "Romania" },
{ y: 7400000, label: "Bulgaria", legendText: "Bulgaria" },
{ y: 10800000, label: "Greece", legendText: "Greece" },
{ y: 10500000, label: "Portugal", legendText: "Portugal" },
]
}
]
});第二部分
第二个问题是，对于甜甜圈图的每个部分，我都需要一个不同的图像。
有没有办法要求图书馆区分不同的部分(即法国、意大利、德国.)？
再次感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-10 17:14:48
您可以调用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;
}我更新了你的JSFiddle。
您将需要使用开发人员工具来查看背景变化，因为我还没有将其链接到任何图像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21049534
复制相关文章
相似问题
腾讯云开发者
