2013-09-27 77 views
0

懸停效果我有這樣的餅圖手動觸發鼠標懸停事件或模擬上點

chart: { 
    type: 'pie', 
    backgroundColor: 'none', 
    renderTo: 'pie-charts-continer' 
}, 

http://jsfiddle.net/a3VDp/

和我最頭痛如何模擬懸停效果,當我們徘徊在小內黑圈。我只是爲了視覺效果而創造它,它應該看起來像一個影子。任何建議?

+0

該內黑圈你在說什麼? –

+0

@GurpreetSingh [關於這個](http://d.pr/i/kw0A)內心黑圈 –

+0

也許甜甜圈圖會更好的解決方案http://www.highcharts.com/demo/pie-donut –

回答

1

使用與之前相同的解決方案 - 只需通過attr()爲設計的切片更新屬性即可。請參閱:http://jsfiddle.net/a3VDp/1/

function mouseOver(element) { 
    element.defaultR = element.graphic.r; 
    element.graphic.attr({ 
    r: element.defaultR + 10 
    }); 
} 

在圖表:

  mouseOver: function (e) { 
       var x = this.x, 
        d = this.series.linkedParent.data[x]; 
       mouseOver(d); 
      }, 
+0

再一次,謝謝 –

0

爲什麼你不把這個內圈畫成一個svg圈元素,然後爲這個元素添加一個監聽器來懸停/ mouseenter事件?

+0

你能告訴我示例如何以更短和簡單的方式做到這一點? –

+0

而且,如何將這個svg圈等同於圖表部分? –