켄드 위 차트 도넛 세트 하이라이트

Question

나는 검도 UI 차트 도넛을 가지고 있는데, 나는 불투명도로 "경로"를 설정하고 싶다. 즉, 그림을 그리는 순간에 param을 읽음으로써 0.5가된다. 내 경우에는 param이 "active"이다. 나는 시도했다. "visual"함수를 작성하지만 절대로 실행되지 않습니다.

토글 하이라이트로 시도했지만 작동하지 않습니다.

$("#chart").kendoChart({ 
      chartArea: { 
       width: 440, 
       height:300 
      }, 
      seriesDefaults: { 
       labels: { 
        template: "# if(dataItem.active) { #☑# } else { #☐# }# #= kendo.format('{0:P}', percentage)#", 
        position: "outsideEnd", 
        visible: true, 
        background: "transparent", 
        font: "14px Verdana" 
       }, 
       opacity: 1 
      }, 
      series: [{ 
       type: "donut", 
       data: [{ 
        category: "Football", 
        value: 35, 
        active: false 
       }, { 
        category: "Basketball", 
        value: 25, 
        active: false 
       }, { 
        category: "Volleyball", 
        value: 20, 
        active: true 
       }], 
       highlight: { 
        visible: true, 
        opacity: 0.5, 
        toggle: function (e) { 
         e.preventDefault(); 
         var opacity = e.dataItem.active ? 0.5 : 1; 
         e.visual.opacity(opacity); 
        } 
       }, 
       visual: function (e) { 
        console.log("visual"); 
        console.log(e); 
       } 
      }], 
      seriesClick: function (e) { 
       debugger; 
       console.log(e); 
       var $this = this; 

       var series = $this.options.series[0].data; 
       for (var i = 0; i < series.length; i++) { 
        if (series[i].category == e.category) { 
         series[i].active = !series[i].active; 
         if (series[i].active) { 
          console.log("TOOGLE"); 
         } 
        } 
       } 
       //this.setOptions({ series: series }); 
       this.refresh(); 
      } 
     }); 

특정 "경로"에 opacity = 0.5를 설정하는 방법에 대한 아이디어가 있습니까? 모든 도움을 주셔서 대단히 감사합니다! 이 코드에서

Answer 1

에 영향을 미칠 것입니다 의미, 당신은 이런 식으로 작업을 수행 할 수 있습니다

visual: function (e) { 
    var opacity = e.dataItem.active ? 0.5 : 1; 
    e.options.opacity=opacity; 
    var v = e.createVisual(); 
    return v; 
} 

DEMO

Answer 2

설정 한 경우 국경 불투명도가이 시리즈의 시각적 특성에

$("#chart").kendoChart({ 
    series: [{ 
     type: "pie", 
     data: [1, 2], 
     highlight: { 
     border: { 
      opacity: 0.5, 
      width: 5, 
      color: "black" 
     } 
     } 
    }] 
}); 

Live Demo