telerik MVC图表只支持同一页中的一张图表

Question

这是我的源代码。我使用telerik控制试用版。 当我尝试使用图形时，它一次只显示一个图形。 telerik是否支持同一页面中的多个图表？

我的索引页

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/examples-offline.min.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script> 
<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script> 
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script> 
<script src="@Url.Content("~/Scripts/console.min.js")"></script> 
<script src="@Url.Content("~/Scripts/prettify.min.js")"></script> 
    <div style="width: 30%; height: 10%"> 
     @Html.Partial("_PieSeries") 
    </div> 
    Hi 
    <br /> 
    <div style="width: 30%; height: 10%"> 
     @Html.Partial("_BarSeries") 
    </div> 

_PieSeries

<div > 
    @(Html.Kendo().Chart() 
     .Name("chart") 
     .Title("Weekly Enagagement Allocation Status ") 
     .Legend(legend => legend 
      .Position(ChartLegendPosition.Bottom) 
     ) 
     .Series(series => 
     { 
      series.Pie(new dynamic[] { 
       new { category = "Mumbai_IND_DC_A112", value = 12 }, 
       new { category = "Bejing_CHI_DC_A223", value = 68 }, 
       new { category = "Redmount_US_DC_B221", value = 49 }, 
       new { category = "Sydney_AUS_DC_B1989", value = 37 },    
       new { category = "DC_US_B1341", value = 17 },    
       new { category = "KPMG_US_DC_B1099", value = 57 },    
       new { category = "KPMG_CHI_DC_U9489", value = 67 },    
       new { category = "DI_US_DC_A1369", value = 87 },    
       new { category = "MIC_UK_DC_B1709", value = 27 },    
       new { category = "KPMG_UK_DC_B6990", value = 37 }     
      }); 
     }) 
     .Tooltip(tooltip => tooltip 
      .Visible(true) 
      .Format("{0}%") 
     ) 
    ) 
</div> 

_BarSeries

<div > 
    @(Html.Kendo().Chart() 
     .Name("chart") 
     .Title("Internet Users") 
     .Legend(legend => legend 
      .Position(ChartLegendPosition.Bottom) 
     ) 
     .Series(series => { 
      series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World"); 
      series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States"); 
     }) 
     .CategoryAxis(axis => axis 
      .Categories("2005", "2006", "2007", "2008", "2009") 
     ) 
     .ValueAxis(axis => axis 
      .Numeric().Labels(labels => labels.Format("{0}%")) 
     ) 
     .Tooltip(tooltip => tooltip 
      .Visible(true) 
      .Format("{0}%") 
     ) 
    ) 
</div> 

Answer 1

我认为，所有你需要做的是改变一个名称属性你的字符TS。每个图表都需要有一个唯一的名称。

@(Html.Kendo().Chart() 
    .Name("chart1") 
    .Title("Weekly Enagagement Allocation Status ") 

@(Html.Kendo().Chart() 
    .Name("chart2") 
    .Title("Internet Users") 

如果两个图表具有相同的名称，则只显示一个图表。