2011-12-22 32 views
5

Tôi đang sử dụng Biểu đồ hình tròn Telerik Kendo và tôi muốn có thể tô màu các nêm.Làm thế nào để tô màu các biểu đồ hình tròn của giao diện người dùng Telerik Kendo?

Sau đây là dấu hiệu cho biểu đồ pie Kendo UI của tôi:

<script type="text/javascript"> 
function createChart() { 
    jQuery("#chart").kendoChart({ 
     theme: jQuery(document).data("kendoSkin") || "Metro", 
     legend: { 
      position: "bottom" 
     }, 
     seriesDefaults: { 
      labels: { 
       visible: true, 
       format: "{0}%" 
      } 
     }, 

     series: [{ 
      type: "pie", 
      data: [{ 
       category: "Remaining Work", 
       value: 75, 
       explode: true 
      }, { 
       category: "CIOs", 
       value: 2 
      }, { 
       category: "Other Executives", 
       value: 10 
      }, { 
       category: "Directors and Physicians", 
       value: 13 
      }] 
     }], 
     tooltip: { 
      visible: true, 
      format: "{0}%" 
     } 
    }); 
} 

jQuery(document).ready(function() { 
    setTimeout(function() { 
     createChart(); 

     // Initialize the chart with a delay to make sure 
     // the initial animation is visible 
    }, 400); 

    jQuery(document).bind("kendo:skinChange", function (e) { 
     createChart(); 
    }); 
}); 
</script> 

Tôi muốn công việc còn lại là ánh sáng màu xám. Làm cách nào để tôi thực hiện việc này?

Mọi đề xuất sẽ được đánh giá cao.

Trả lời

18

Trong Kendo UI DataViz, tất cả biểu đồ hỗ trợ ghi đè màu chủ đề qua seriesColors option. Thuộc tính này sẽ lấy một chuỗi các chuỗi màu thập lục phân. Ví dụ:

$("#chart").kendoChart({ 
    ... 
    seriesColors: ["#7c7c7c", ... ] 
}); 
0
it is an implementation from server side would be very interesting on the concept of avoiding Similar shades..please look in to the below code which iam inserting to bind the pie chart with colors 
If Not radChart Is Nothing Then 
        radChart.PlotArea.EmptySeriesMessage.TextBlock.Text = strNoData 
        radChart.SkinsOverrideStyles = False 
        Dim seriesColors As Color() = {Color.Aqua, Color.Bisque, Color.Chartreuse, Color.Coral, Color.DarkCyan, Color.DarkKhaki, Color.DimGray, Color.Yellow, Color.LightGreen, Color.Magenta, Color.Orange, Color.Purple, Color.SaddleBrown, Color.Silver, Color.WhiteSmoke, Color.Violet, Color.RosyBrown, Color.Olive, Color.Navy, Color.IndianRed} 
        Dim seriesPalette As New Palette("seriesPalette", seriesColors, True) 
        radChart.CustomPalettes.Add(seriesPalette) 
        radChart.SeriesPalette = "seriesPalette" 
        radChart.DataBind() 
       End If