开发系统时，我们往往需要简单的以图标形式将数据展示给客户。
* * * * *
* 以下代码实现了柱状图：
~~~
@{
var data = new List<LineItem>();
var rd = new Random();
data.Add(new LineItem() { Name = "第一节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第二节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第三节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第四节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第五节车厢人数", Value = rd.Next(50) });
}
@Html.Q().Chart().Bar().SourceItem(data).ShowTool()
~~~
效果如下：
* * * * *
扩展：常见方法列表：
|服务端方法名 |说明 |
| --- | --- |
|Title(string title) |设置头部文字 |
|ShowTool(bool v = true) |是否显示工具栏 |
|AjaxUrl(string url) |获取用来更新图形数据的地址 |
|AjaxKeepOldData(bool keepOldData = true) |Ajax更新数据的时候，是否保留旧数据 |
|AjaxTime(int time) |Ajax自动更新的时间间隔 |
|ShowZoom(bool v = true) |是否显示缩放 |
|ShowArea(bool v = true) |是否显示区域图 |
|ShowSmooth(bool v = true) |是否显示为曲线 |
|ShowSymbol(bool v = true) |是否显示拐角圆点 |
|ShowStep(bool v = true) |是否以步进方式显示 |
|客户端方法名 |说明 |
| --- | --- |
| --- | --- |
