kendo饼图和柱图

饼图代码:
        <td>
                    @(Html.Kendo().Chart<PieModel>()
        .Name("chart")
                .Title(title => title
                    .Text("企业申报情况")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .DataSource(ds =>
                {
                    ds.Read(reader => reader.Action("GetEnterpriseScale", "EnterpriseApplication").Data("_additionalSearchData"));
                })
                .Series(series => series.Pie(model => model.Value, model => model.Category)
            .Labels(labels => labels
                .Template("#= category #: #= value#")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150)
        )
            .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
    )
            </td>

柱图代码
  <td>
      <div class="chart-wrapper">
   @(Html.Kendo().Chart<BulletModel>()
                      .Name("chart-mmHg")
                      .Legend(legend => legend
                          .Visible(false)
                      )
                       .DataSource(ds =>
                {
                    ds.Read(reader => reader.Action("GetCS", "EnterpriseApplication"));
                }
                    )
                .Series(series => 
                    series.VerticalBullet(model => model.Current, model => model.Target )    
              //{
              //series.VerticalBullet(s => s.Current, s => s.Target).Color("#ffffff").Target(t => t.Color("#ffffff"));//设置颜色
              //}
                )
                      .ChartArea(chartArea => chartArea.Margin(0))

                      .CategoryAxis(axis => axis
                          .MajorGridLines(lines => lines.Visible(false))
                          .MajorTicks(lines => lines.Visible(false))
                          .Title("mmhg")
                          .Categories(model => model.Category)
                      )
                      .ValueAxis(axis => axis
                          .Numeric()
                       .Max(900)
                          .Min(415)
                          .MinorTicks(lines => lines.Visible(true))
                          .MajorGridLines(lines => lines.Visible(false))
                          .PlotBands(bands =>
                          {
                              bands.Add().From(715).To(752).Color("#ccc").Opacity(0.6);
                              bands.Add().From(752).To(772).Color("#ccc").Opacity(0.3);//#2890cc
                          }
                          )
                      )
                      .Tooltip(tooltip => tooltip
                          .Visible(true)
                          .Shared(true)
                          .Template("Maximum: #= value.target # <br /> Average: #= value.current #")
                      )
                )

</div>
            </td>

实类
  public class PieModel
    {
        public string Category { get; set; }//显示名
        public string Value { get; set; } //显示值
        public string Color { get; set; }//显示颜色例如:#9de219 可不赋值

    }

    [Serializable]
    public class BulletModel
    {
        public string Current { get; set; }
        public string Target { get; set; }
        public string Category { get; set; }
    }

//后台代码
   public ActionResult GetCS()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Current");
            dt.Columns.Add("Target");
            dt.Columns.Add("Category");
            dt.Rows.Add("770", "610","第一类");
            dt.Rows.Add("760", "710","第二类");
            dt.Rows.Add("780", "810","第三类");
            var list = Data2Json.GetNormalizedRows(dt);
            return Json(list, JsonRequestBehavior.AllowGet);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值