在单个页面上可视化几个 Shield UI ASP.NET MVC 图表答案

【问题标题】：Visualizing a couple of Shield UI ASP.NET MVC charts on a single page在单个页面上可视化几个 Shield UI ASP.NET MVC 图表
【发布时间】：2013-08-22 12:24:31
【问题描述】：

我是 Shield UI ASP.NET MVC 图表的新手，我似乎遇到了一个非常奇怪的问题。我在一个页面上使用了两个图表，并从在线教程中获取了代码，但我被卡住了，无法继续。当他们两个都在时：

@(Html.ShieldChart()
.Name("chart")
.AxisX(axisX => axisX.Title(title => title.Text("Speed of Wind")))
.AxisY(axisY => axisY.Title(title => title.Text("RainFall Quantities")))
.PrimaryHeader(header => header.Text("Weather - Wind/Precipitation Values"))
.Tooltip(tooltip => tooltip.AxisMarkers(axisMarkers => axisMarkers
    .Enabled(true)
    .Mode(Shield.Mvc.UI.Chart.TooltipAxisMarkerMode.XY)
    .Width(1)
    .ZIndex(3)))
.ChartLegend(chartLegend => chartLegend
    .Align(Shield.Mvc.UI.Chart.Align.Right)
    .VerticalAlign(Shield.Mvc.UI.Chart.VerticalAlign.Top)
    .RenderDirection(Shield.Mvc.UI.Chart.Direction.Vertical))
.DataSeries(dataSeries => dataSeries.Scatter()
    .CollectionAlias("January 2008")
 …..
)

 @(Html.ShieldChart()
.Name("chart")
.Export(false)
.PrimaryHeader(header => header.Text("Browsers Popularity amongst Users"))
.ChartLegend(legend=>legend.Enabled(true))
.SeriesSettings(setting=>setting.Pie(pie=>pie
    .EnablePointSelection(true)))
.Tooltip(tooltip=>tooltip.CustomPointText("{point.collectionAlias}: {point.y}"))        
.DataSeries(dataSeries => dataSeries.Pie()
    .CollectionAlias("Usage")
  …..
 )

页面上什么都看不到。当我删除其中任何一个时，其他显示正确。问题可能是什么？我需要添加其他元素来组成容器吗？

【问题讨论】：

标签： asp.net-mvc-3 shieldui

【解决方案1】：

不需要任何额外的元素。问题是，图表名称之间存在冲突。可能您没有注意到，您的两个图表都具有相同的名称：

.Name("图表")

基本上，具有相同 ID 的 div 会显示在页面上，只会阻碍 JS 脚本访问它们，这里的问题导致不显示图表。您可以更改名称，例如

.Name("chartA") 

and 

.Name("chartB")

例如，问题必须解决。

【讨论】：