本文主要是介绍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);
}
这篇关于kendo饼图和柱图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
