第二部分

Question

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

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

非常感谢你。

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并使用它来返回数据集的值，在此示例中，我使用了名称，但您可以将其更改为图例。使用此值，您可以更新背景图像，如下所示。

  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。

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

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

第二部分

1 个答案: