ShieldUI 图表 Y 轴样式无法正常工作答案

【问题标题】：ShieldUI Chart Y Axis styling not working properlyShieldUI 图表 Y 轴样式无法正常工作
【发布时间】：2014-04-10 19:31:53
【问题描述】：

我正在为客户的应用程序评估 ShieldUI，我遇到了在 Y 轴标题上设置样式的问题。以下是视图中的代码：

@(Html.ShieldChart(Model)
      .Name("chart")
      .PrimaryHeader(header => header.Text("")) //no header needed
      .Export(true) //turn on export
      .ChartLegend(legend => legend.Enabled(false)) //turn off legend since there's only 1 series
      .Tooltip(tooltip =>
               tooltip.ChartBound(true)
                   //turn on the axis marker tooltip thingy
                      .AxisMarkers(axisMarkers =>
                                   axisMarkers.Enabled(true).Mode(TooltipAxisMarkerMode.XY)
                                              .Width(1).ZIndex(3)
                   )
                      .CustomHeaderText("{point.pointName:MM-yyyy}")
                      .CustomPointText("{point.y:c}")
      )
      .AxisX(axisX => axisX
                          .CategoricalValues(model => model.Date)
                          .Title(title => title.Text("Month").Style(style => style.FontWeight(FontWeight.Bold)))
                          .AxisTickText(axisTickText => axisTickText.Format("{text:MM-yyyy}")))
      .AxisY(axisY => axisY
                          .Title(title => title.Text("Price").Style(style => style.FontWeight(FontWeight.Bold)))
                          .AxisTickText(axisTickText => axisTickText.Format("{text:c}")))
      .DataSeries(dataSeries => dataSeries.Line()
                                          .Data(model => model.Price)))

x 轴上的粗体设置工作正常，但我无法在 Y 轴上设置粗体或大小。看起来生成的标记可能有问题。以下是标记中的两个文本元素：

<text x="432" y="375" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#404040;font-weight:bold;fill:#404040;" zIndex="7" text-anchor="middle" visibility="visible"><tspan x="432">Month</tspan></text>

<text x="25" y="181" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#636363;font-weight:bold;font:11px Segoe UI, Tahoma, Verdana, sans-serif;fill:#636363;" zIndex="7" transform="rotate(270 25 181)" text-anchor="middle" visibility="visible"><tspan x="25">Price</tspan></text>

第一个工作正常，第二个不行，我注意到他们定义字体信息的方式不同（第一个使用 font-family 和 font-size，第二个使用单一字体设置。如果我（通过萤火虫）将样式定义从 x 复制到 y，y 轴变为正确粗体。

是我做错了什么，还是 ShieldUI 生成 SVG 的方式存在错误？如果它是一个错误，它是否有可能很快被修复？我可以想出几种方法来解决这个问题，但如果可能的话，我宁愿把黑客排除在外，然后等待修复，如果有的话。

编辑：我意识到我复制的 Y 轴标记与此处包含的视图代码不匹配，因此我对其进行了更新。这样做之后，我意识到标签在已经定义了系列、大小等之后，在末尾添加了一个“字体：”样式。这让我想得更多，所以这是 ShieldUI 的一个错误。生成该标记。

【问题讨论】：

标签： shieldui

【解决方案1】：

我们在 Shield UI JavaScript Chart 组件中发现了一个错误，该错误也影响了 ASP.NET 和 MVC 包装器。您所描述的行为是由于字体设置应用于图表轴标题的方式存在问题。在某些情况下，Shield UI 图表会应用默认的 font 样式，从而阻止应用 fontSize 和 fontWeight 等设置。

该问题在发现后不久即得到修复，预计将在下周推出的 1.6.4 版本的 Shield UI JavaScript 套件中提供。该修复与所有服务器端包装器兼容，包括 ASP.NET MVC。

【讨论】：