触发 mouseover 事件时显示图像

Question

我正在使用 Canvas.js 创建一个甜甜圈类型的图表。 基本上，当鼠标悬停在图表的一部分时，我想在甜甜圈中间显示一张图片（每个国家都有自己的图片）。

鼠标悬停事件存在于库中，但我似乎无法触发除警报之外的任何其他事件。

非常感谢。

到 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" },            

            ]
        }
        ]
    });

第二部分

第二个问题是我需要为圆环图的每个部分使用不同的图像。

有没有办法让图书馆区分不同的部分（即法国、意大利、德国......）？

再次感谢！

Answer 1

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

  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。

您需要使用开发者工具查看背景变化，因为我没有将它链接到任何图像。