Studio for ASP.NET Wijmo: 定制 C1BarChart 数据条

C1BarChart 是 Wijmo 使用频率最高的控件之一。除了它丰富的服务端接口外，它还提供了灵活的前台接口。典型的应用场景是，当系列被添加到 C1BarChart，X 和 Y 轴会自动根据数值展示数据。而有时我们需要在数据条基础上进行定制，例如标签或者条形图颜色。

在本篇文章中，我们将使用 ValueLabels 类来实现标签的定制。最终实现效果如图：

添加两个系列到 C1BarChart

我们创建两个系列，按月份来显示数据。首先我们需要设置这两个系列的数据。代码如下：

#region Series Addition
double[] unitsSold = new double[12];
double[] month = new double[12];
  
//populate the array
int i = 0;
for (i = 0; i < 12; i++)
{
   unitsSold<em class="bbcode-em"></em> = i;
   month<em class="bbcode-em"></em> = i * i;
}
  
//create an object of chart series and add data
BarChartSeries bcs = new BarChartSeries();
bcs.Data.X.AddRange(unitsSold);
bcs.Data.Y.AddRange(month);
bcs.Label = "FY2009 ACTUAL";
  
//add the first series
C1BarChart1.SeriesList.Add(bcs);
  
double[] unitsSold1 = new double[12];
double[] month1 = new double[12];
//populate the array
int j = 0;
int counter = 0;
for (j = 12; j < 24; j++)
{
   unitsSold1[counter] = j;
   month1[counter] = counter * 2;
   counter++;
}
  
//create an object of chart series and add data
BarChartSeries bcs1 = new BarChartSeries();
bcs1.Data.X.AddRange(unitsSold1);
bcs1.Data.Y.AddRange(month1);
bcs1.Label = "FY2010 ACTUAL";
  
//add the second series
C1BarChart1.SeriesList.Add(bcs1);
#endregion

系列添加成功，接下来我们就进行标签的定制。由于 X 轴显示的是月份名称，我们将存储月份到数组中，我们将遍历数据并且设置给 X 轴标签。代码如下：

#region Adding Value Labels
//array consisting names of the months
string[] monthNames = DateTimeFormatInfo.CurrentInfo.MonthNames;
//FOR THE FIRST SERIES
for (i = 0; i < monthNames.Length - 1; i++)
{
   //create object of ValueLabel class
   ValueLabel vl = new ValueLabel();
   // set the x-axis value which you want to replace
   vl.NumericValue = i;
   // set the desired value which you want to show
   vl.Text = monthNames<em class="bbcode-em"></em>.Substring(0, 3);
   // add it to the ValueLabel collection
   C1BarChart1.Axis.X.ValueLabelList.Add(vl);
}
  
//set the annotation to valuelabels instead of values.
C1BarChart1.Axis.X.AnnoMethod = ChartAxisAnnoMethod.ValueLabels;
  
//FOR THE SECOND SERIES
for (i = 0; i < monthNames.Length - 1; i++)
{
   //create object of ValueLabel class
   ValueLabel vl = new ValueLabel();
   vl.NumericValue = i + 12;
   // set the desired value which you want to show
   vl.Text = monthNames<em class="bbcode-em"></em>.Substring(0, 3);
  
   // add it to the ValueLabel collection
   C1BarChart1.Axis.X.ValueLabelList.Add(vl);
}
  
//set the annotation to valuelabels instead of values.
C1BarChart1.Axis.X.AnnoMethod = ChartAxisAnnoMethod.ValueLabels;
#endregion

以上即为定制X轴标签的方法，可以下载 demo 测试效果：

VS2012 + C# + Studio for ASP.NET Wijmo: