← 返回所有博客文章

 

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

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

BarColors

 

由于 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