Telerik MVC Charts 在同一页面中一次只支持一个图表吗答案

【问题标题】：Is telerik MVC Charts supports for only one chart at a time in same pageTelerik MVC Charts 在同一页面中一次只支持一个图表吗
【发布时间】：2012-08-03 05:21:18
【问题描述】：

这是我的源代码。我正在使用 Telerik 控件试用版。当我尝试 graphs 时，它一次只显示一个。 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>

【问题讨论】：

标签： telerik telerik-mvc telerik-charting

【解决方案1】：

我认为您需要做的就是更改其中一个图表的 Name 属性。每个图表都需要有一个唯一的名称。

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

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

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

【讨论】：