chart.js donut当达到X度时突出显示段

Question

我得到了这个圆环图：

http://jsfiddle.net/35of1Lzg/10/

现在我的问题是，是否有可能在片段的开头到达箭头时突出显示片段，并在片段的末端到达箭头时取消它。 （因此当箭头在其中时突出显示一段）。

<div id="cont">

<canvas id="myChart" width="300" height="200"></canvas>
<div id="wheelArrow" style="bottom:485px"></div>

<button id="rotate">rotate</button>

</div>

var data = [{
    value: 300,
    color: "#C7464A",
    highlight: "#FF1A1E",
    label: "Red"
}, {
    value: 50,
    color: "#469F9D",
    highlight: "#5AD3D1",
    label: "Green"
}, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFF830",
    label: "Yellow"
}]

var ctx = document.getElementById("myChart").getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    animation: false,
    tooltipEvents: []
});


document.getElementById("rotate").onclick = function () {
   var el = document.getElementById("myChart");
  el.style.transition = "transform 5s cubic-bezier(0, 0, 0.2, 1)";
    el.style.webkitTransform = "rotate(10rad)"; 

};


#wheelArrow {
    position: absolute;
    border-bottom: 10px solid transparent;
    border-right: 35px solid #00bc8c;
    border-top: 10px solid transparent;
    height: 0;
    left: 40%;
    margin-top: -10px;
    pointer-events: none;
    width: 0;
    z-index: 2;
}

#cont {
  position: relative;
  width: 600px;
  height: 600px;
}