2017-03-06 2 views
0

私は剣道UIチャートのドーナツを持っています。私は不透明度を持つ "パス"を設定したいと思います:パーマを読むことによって描画の瞬間を0.5にします。 「ビジュアル」機能を書いても実行されることはありません...kendoui chartドーナツセットのハイライト

トグルハイライトで試してみましたが、うまくいきません。

$("#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(); 
      } 
     }); 

特定の「パス」に不透明度= 0.5を設定する方法はありますか?すべての助けをありがとう!

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

:このコードで

答えて

2

に影響を与えるという意味で、あなたはこのようにそれを行うことができますDEMO

+0

私はあなたのソリューションを使用して、変更を行うための不透明度を設定しています。 – Ciccio

+0

剣道の文書では見つけられなかった素晴らしい優雅なソリューション。 爆発したドーナツアイテムの境界線の色を変更するためにそのコードを使用しました。 –

0

あなたが境界線の不透明度を設定した場合は、それは、一連の視覚特性に

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

Live Demo

関連する問題