검도 그리드의 검도 차트

Question

문제가 있습니다. 검도 그리드에서 Asp.net mvc로 검도 원형 차트를 설정해야합니다.

클라이언트 템플릿의 열 중 하나에서 파이 차트를 설정하고자하는 표가 있습니다.

할 수 있습니까? 그렇다면 어떻게?

TNX

Answer 1

jsfiddle 샘플 당신이 시도

Telerik Forum Link

Sample JS Fiddle

Answer 2

찾고있는 것을 제공하는 telerik에 아래 포럼을 참조하시기 바랍니다이

을 같은

@(Html.Kendo().Grid<Model>() 
     .Name("grid") 
       .DataSource(dataSource => dataSource 
         .Ajax()      
         .ServerOperation(true)      
         .Model(model => model.Id(p => p.ID)) 
         .Read(read => read.Action("method", "controller")) 
        ) 
     .Pageable() 
     .Sortable() 
     .Scrollable() 
      .Events(e => e.DataBound("dataBound")) 
     .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) 
     .Columns(columns => 
     { 

      columns.Bound(p => p.ID).ClientTemplate("<div class='chart'></div>"); 
     }) 
) 

이고 스크립트는

function dataBound() { 
      var grid = this; 

      grid.tbody.find("tr[role='row']").each(function() { 
       var model = grid.dataItem(this); 



       $(this).find(".chart").kendoChart({ 
        title: { 
         text: "Olympic Medals won by USA" 
        }, 
        legend: { 
         visible: false 
        }, 
        seriesDefaults: { 
         type: "bar", 
         stack: { 
          type: "100%" 
         } 
        }, 
        series: [{ 
         name: "Gold Medals", 
         data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46], 
         color: "#f3ac32" 
        }, { 
         name: "Silver Medals", 
         data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29], 
         color: "#b8b8b8" 
        }, { 
         name: "Bronze Medals", 
         data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29], 
         color: "#bb6e36" 
        }], 
        valueAxis: { 
         line: { 
          visible: false 
         }, 
         minorGridLines: { 
          visible: true 
         } 
        }, 
        categoryAxis: { 
         categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012], 
         majorGridLines: { 
          visible: false 
         } 
        }, 
        tooltip: { 
         visible: true, 
         template: "#= series.name #: #= value #" 
        } 
       }); 
      }); 
     } 

Answer 3

나는 특별한 요구 사항이 있습니다. 테이블 안에 하나의 가로 열을 만듭니다. 테이블 당 차트를 갖는 것이 과잉이라고 생각하여 그리드 구성 요소를 사용자 정의했습니다. 몇 가지 CSS로 스타일을 지정하고 KendoUI를 사용하여 간단한 Html 테이블을 기반으로 그리드를 만듭니다.

매우 구체적인 것을 원하면 도움이 될 수 있습니다.

시각 예 : http://embed.plnkr.co/Hy2u4d/

: 여기

는 작업 예제