Studio for ASP.NET Wijmo: 更改 C1BarChart Bar 颜色

C1BarChart 是 Wijmo 使用频率最高的控件之一。典型的应用场景是通过数据源生成图表，分别制定 X轴和Y轴的字段。最近我们收到用户提出的需求，需要根据没有设置给图表数据的字段信息，设置在同一系列中数据条的颜色。

数据源中共有三个字段，分别为 Task, Time 和 Status, Task 和 Time 被设置给 X 和 Y 轴，条形图的颜色代表当前 Task 完成情况。最终实现效果图如下：

由于 C1BarChart 没有绑定 status 字段，那么我们如何获取当前任务的执行状态那？ 答案是我们可以通过 C1GridView 来获取，我们通过绑定数据到 C1GridView 控件，由此我们便可以从前台获取任务状态信息了。因此，首先我们需要设置 C1GridView 的数据源。

protected void Page_Load(object sender, EventArgs e)
{
   DataTable dt = new DataTable();
   dt.Columns.Add("Week", typeof(string));
   dt.Columns.Add("Time", typeof(double));
   dt.Columns.Add("Status", typeof(string));
  
   dt.Rows.Add("Wk1", 6, "Running");
   dt.Rows.Add("Wk1", 10, "Failed");
   dt.Rows.Add("Wk1", 19, "Failed");
   dt.Rows.Add("Wk1", 25, "Finished");
   dt.Rows.Add("Wk1", 7, "Running");
  
   C1BarChart1.DataSource = dt;
  
   C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding cb = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding();
   cb.XField = "Week";
   cb.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String;
   cb.YField = "Time";
   cb.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number;
  
   C1BarChart1.DataBindings.Add(cb);
   C1BarChart1.DataBind();
  
   C1GridView1.DataSource = dt;
   C1GridView1.DataBind();
}

接下来我们需要在前台获取任务状态，通过 C1GridView 来获取。代码如下：

var color = [];
$(document).ready(function () {
   var data = $("#C1GridView1").c1gridview("data");
   for (var i = 0; i < data.length; i++) {
      var status = data<em class="bbcode-em"></em>[2];
      if (status === "Running") {
         color.push("Yellow");
      }
      else if (status === "Finished") {
         color.push("Green");
      }
      else if (status === "Failed") {
         color.push("Red");
      }
   }
   $("#C1BarChart1").c1barchart({
      painted: function (args) {
         var count = $(this).data().fields.chartElements.bars.length;
         for (var i = 0; i &lt; count; i++) {
            var bar = $(this).c1barchart("getBar", i);
            bar.attr({
               fill: color<em class="bbcode-em"></em>,
               stroke: "black"
            });
         }
         $(".wijmo-wijgrid").css("display", "none");
      },
      mouseOut: function (args) {
         var count = $(this).data().fields.chartElements.bars.length;
         for (var i = 0; i &lt; count; i++) {
            var bar = $(this).c1barchart("getBar", i);
            bar.attr({
               fill: color<em class="bbcode-em"></em>,
               stroke: "black"
            });
         }
      }
   });
});

以上就是实现该功能的所有代码，可以下载 Demo 进行体验：

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

更多 Studio for ASP.NET Wijmo 特性请参考：

/developer/componentone-aspnet