我正在使用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" },    

      ] 
     } 
     ] 
    });

第二部分

第二個問題是，我需要不同的圖像的圓環圖的每一個部分。

有沒有辦法讓圖書館區分不同的部分（即在法國，意大利，德國之間......）？

再次感謝！

來源

2014-01-10 basbabybel

曾嘗試這方面，我想你錯過了什麼http://jsfiddle.net/83gxL/1/ – CognitiveDesire

@CognitiveDesire哼哼，這讓一切都消失了...... – basbabybel

這意味着鼠標移到作品 – CognitiveDesire

您可以撥打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。

您將需要使用開發人員工具來查看背景更改，因爲我沒有將其鏈接到任何圖像。

來源

2014-01-10 17:14:48 Jonathan

這似乎是一個相當不錯的解！但是，它返回給我這個錯誤：「解析'background-image'的值時出錯。 – basbabybel

好吧，用'style.backgroundImage =「url（'base.jpeg'）」;'它工作正常。只需要不要重複的背景：在CSS中添加'background-repeat：no-repeat;' – basbabybel

我剛剛修改了@ Jonathan的JSFiddle。結帳http://jsfiddle.net/83gxL/3/ –

觸發鼠標懸停事件時顯示圖像

第二部分

回答

相關問題