如何使用主题文件自定义 ASP.NET 图表答案

【问题标题】：How To Customize ASP.NET Chart Using A Theme File如何使用主题文件自定义 ASP.NET 图表
【发布时间】：2016-07-03 11:08:37
【问题描述】：

我想创建一个折线图，其中 x 轴是日期，y 轴有位置绿色（在 0 的位置）、黄色 (1) 和红色 (2)。

我怎样才能做到这一点？

目前只有数字。我用 XML 尝试过，但我对它了解不多，而且有点令人困惑。我可以使用它访问 y 轴的单个元素并将它们转换为文本吗？我可以在axisLabel的Chart.AddSeries方法中以某种方式实现if else方法吗？

控制器

//XML
string t = @"
<Chart> 
  <ChartAreas> 
    <ChartArea Name=""Default"" _Template_=""All""> 
      <AxisY Interval=""1""> 
        <LabelStyle Font=""Verdana, 70px"" /> 
      </AxisY> 
    </ChartArea> 
  </ChartAreas> 
</Chart>";

var Date_min = OpenDate;
var Date_max = DateTime.Today;

var chart = new Chart(width: 300, height: 200, theme: t)
           .AddSeries(
                      chartType: "line",
                      name: "Temperature",
                      markerStep: 2,
                      xValue: Date_X,
                      yValues: Temperature_Y)       //0,1 or 2 for green, yellow and red                     
           .SetXAxis("Date", Date_min.ToOADate(), Date_max.ToOADate())
           .SetYAxis("Temperature", 0, 2.5)
           .GetBytes("png");

提前感谢您的帮助。

更新

我查看了 System.Web.UI.DataVisualization.Charting 框架并没有找到任何额外的功能来解决我的问题。

我想更改 y 轴标签。不是 y 轴的一般标签，而是它的每个位置。 y 轴只有三个位置必须重命名为绿色、黄色和红色，而不是 0、1、2。 x轴的每个日期都会有对应的颜色。

【问题讨论】：

首先，不清楚您到底要自定义什么：标签？数据点？其次，您使用的是System.Web.Helpers，它是System.Web.UI.DataVisualization 的简化版本。您可能想要切换到后者，具体取决于您想要自定义的内容。
您可以使用System.Web.Helpers 创建您所描述的自定义标签，还可以自定义整个系列点的颜色，但不能自定义每个点的颜色。为此，您需要DataVisualization。
如果可以的话，贴一张你想做的照片。
但是如何创建自定义标签呢？我希望图片能帮助你理解问题。
请看我的帖子。

标签： c# xml asp.net-mvc-4 charts mschart

【解决方案1】：

使用此主题文件（或字符串）创建自定义轴标签：

<?xml version="1.0" encoding="utf-8" ?> 
 <Chart> 
  <ChartAreas> 
    <ChartArea Name="Default" _Template_="All"> 
      <AxisY>
        <CustomLabels>
          <CustomLabel Text="GREEN (0 - 1)" ToPosition="1" />
          <CustomLabel FromPosition="1" Text="YELLOW (1 - 2)" ToPosition="2" />
          <CustomLabel FromPosition="2" Text="RED (2 - 3)" ToPosition="3" />
        </CustomLabels>
      </AxisY> 
    </ChartArea>
  </ChartAreas>
   <Series>
     <Series Name="Temperature" BorderWidth="3" >
     </Series>
   </Series>
   <Legends>
     <Legend Alignment="Center" Docking="Top" Name="Temperature">
     </Legend>
   </Legends>
 </Chart>

Controller.cs：

var Date_min = DateTime.Now.AddDays(-4);
var Date_max = DateTime.Now.AddDays(1);

        var chart = new Chart(width: 600, height: 400, themePath: "XMLFile1.xml")
                   .AddSeries(
                              chartType: "line",
                              name: "Temperature",
                              xValue: new DateTime[] { DateTime.Now.AddDays(-4), DateTime.Now.AddDays(-3), DateTime.Now.AddDays(-2), DateTime.Now.AddDays(-1), DateTime.Now },
                              yValues: new int[] { 2, 1, 2, 2, 1 })       //0,1 or 2 for green, yellow and red                     
                   .SetXAxis("Date", Date_min.ToOADate(), Date_max.ToOADate())
                   .SetYAxis("Temperature", 0, 3.0)
                   .Save("~/Image/MyChart.png", "png");

【讨论】：