kendoui圖甜甜圈設置亮點

我有一個kendo ui圖甜甜圈，並且我想設置帶有不透明度的「路徑」：在繪圖時刻通過讀取一個參數來設置0.5，在我的情況下param是「活動」寫「視覺」功能，但從未執行...kendoui圖甜甜圈設置亮點

我試過用togglehaighlight，但沒有工作。

$("#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？非常感謝你的幫助！

來源

2017-03-06 Ciccio

在這一系列的視覺特性，你可以做這樣的：

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

DEMO

來源

2017-03-22 15:38:54 ezanker

我已使用您的解決方案，設置不透明度以進行更改。 – Ciccio

偉大而優雅的解決方案，我在kendo文檔中找不到... 我使用該代碼修改了爆炸甜甜圈項目的邊框顏色。 –

在此代碼，如果你設置邊框透明度意味着它會影響

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

Live Demo

來源

2017-03-07 12:39:51

kendoui圖甜甜圈設置亮點

回答

相關問題