MVC 内置图表组建的简单使用


帮助类

/// <summary>
/// 绘制图表,并保存在服务器中[必要引用::System.Web.Helpers]
/// </summary>
public class ChartHelper
{
    //也可以使用该枚举,需添加 System.Web.DataVisualization.dll 
    //chartType: UICharting.SeriesChartType.Column.ToString()

    private const int chartWidth = 800;
    private const int chartHeight = 600;
    /// <summary>
    /// 后台生成图片, 并保存在服务器中
    /// </summary>
    /// <param name="name">系列的唯一名称 做图例时有用</param>
    /// <param name="title">图表标题</param>
    /// <param name="names">list string 名称(坐标轴中的X轴)</param>
    /// <param name="values">list float 值(坐标轴中的Y轴)</param>
    /// <param name="saveurl">保存到服务的URL</param>
    /// <param name="charttype">图表类型 默认为柱形图 ChartType.Column</param>
    /// <param name="width">宽度 默认500</param>
    /// <param name="height">高度 默认300</param>
    /// <param name="Xtitle">X轴标题</param>
    /// <param name="Ytitle">Y轴标题</param>
    /// <param name="charttheme">图表样式</param>
    public void GenerateChart(string name, string title, List<string> names, List<float> values, string saveurl, ChartType charttype, int width = 500, int height = 300, string Xtitle = "", string Ytitle = "", string charttheme = ChartTheme.Vanilla)
    {
        try
        {
            DateTime dt = DateTime.Now;
            Chart chart = new Chart(width, height, charttheme.ToString());
            chart.AddTitle(title);
            chart.AddSeries(
                name: name,
                chartType: charttype.ToString(),
                xValue: names,
                yValues: values
            );
            chart.SetXAxis(Xtitle);
            chart.SetYAxis(Ytitle);
            chart.Save(saveurl);
        }
        catch (Exception ex)
        {

        }
    }
}
/// <summary>
/// 图表类型
/// </summary>
public enum ChartType
{
    /// <summary>
    /// 点图类型
    /// </summary>
    Point = 0,
    /// <summary>
    /// 快速点图类型
    /// </summary>
    FastPoint = 1,
    /// <summary>
    /// 气泡图类型
    /// </summary>
    Bubble = 2,
    /// <summary>
    /// 折线图类型
    /// </summary>
    Line = 3,
    /// <summary>
    /// 样条图类型
    /// </summary>
    Spline = 4,
    /// <summary>
    /// 阶梯线图类型
    /// </summary>
    StepLine = 5,
    /// <summary>
    /// 快速扫描线图类型
    /// </summary>
    FastLine = 6,
    /// <summary>
    /// 条形图类型
    /// </summary>
    Bar = 7,
    /// <summary>
    /// 堆积条形图类型
    /// </summary>
    StackedBar = 8,
    /// <summary>
    /// 百分比堆积条形图类型
    /// </summary>
    StackedBar100 = 9,
    /// <summary>
    /// 柱形图类型
    /// </summary>
    Column = 10,
    /// <summary>
    /// 堆积柱形图类型
    /// </summary>
    StackedColumn = 11,
    /// <summary>
    /// 百分比堆积柱形图类型
    /// </summary>
    StackedColumn100 = 12,
    /// <summary>
    /// 面积图类型
    /// </summary>
    Area = 13,
    /// <summary>
    /// 样条面积图类型
    /// </summary>
    SplineArea = 14,
    /// <summary>
    /// 堆积面积图类型
    /// </summary>
    StackedArea = 15,
    /// <summary>
    /// 百分比堆积面积图类型
    /// </summary>
    StackedArea100 = 16,
    /// <summary>
    /// 饼图类型
    /// </summary>
    Pie = 17,
    /// <summary>
    /// 圆环图类型
    /// </summary>
    Doughnut = 18,
    /// <summary>
    /// 股价图类型
    /// </summary>
    Stock = 19,
    /// <summary>
    /// 线图类型
    /// </summary>
    Candlestick = 20,
    /// <summary>
    /// 范围图类型
    /// </summary>
    Range = 21,
    /// <summary>
    /// 样条范围图类型
    /// </summary>
    SplineRange = 22,
    /// <summary>
    /// 范围条形图类型
    /// </summary>
    RangeBar = 23,
    /// <summary>
    /// 范围柱形图类型
    /// </summary>
    RangeColumn = 24,
    /// <summary>
    /// 雷达图类型
    /// </summary>
    Radar = 25,
    /// <summary>
    /// 极坐标图类型
    /// </summary>
    Polar = 26,
    /// <summary>
    /// 误差条形图类型
    /// </summary>
    ErrorBar = 27,
    /// <summary>
    /// 盒须图类型
    /// </summary>
    BoxPlot = 28,
    /// <summary>
    /// 砖形图类型
    /// </summary>
    Renko = 29,
    /// <summary>
    /// 新三值图类型
    /// </summary>
    ThreeLineBreak = 30,
    /// <summary>
    /// 卡吉图类型
    /// </summary>
    Kagi = 31,
    /// <summary>
    /// 点数图类型
    /// </summary>
    PointAndFigure = 32,
    /// <summary>
    /// 漏斗图类型
    /// </summary>
    Funnel = 33,
    /// <summary>
    /// 棱锥图类型
    /// </summary>
    Pyramid = 34,
}

使用说明

        ChartHelper charthelper = new ChartHelper();
        List<string> names = new List<string>() { 
                        "北京",
                        "上海",
                        "广州",
                        "深圳",
                        "重庆"
                    };
        List<float> values = new List<float>() { 
                        1962.24f,
                        2301.91f,
                        1270.08f,
                        1035.79f,
                        2884.62f
                    };

        charthelper.GenerateChart("图表1", "2013~2014城市人口统计", names, values, "", ChartType.Column, 500, 400, "城市", "人口", ChartTheme.Vanilla);

其他常见方法

        var chart = new Chart(width: 1200, height: 400, theme: ChartTheme.Blue);
        chart.AddTitle(text: "测试");
        chart.AddSeries(name: "测试", chartType: UICharting.SeriesChartType.Column.ToString(), xValue: new[]{
            "测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9", "测试10", "测试11", "测试12"
        }, yValues: new[]{
            "1","2","3","4","5","6","7","8","9","10","11","12"
        });

        //chart.SetXAxis(min: 0, max: 10.0 / 12.0);
        //chart.SetYAxis(min: 0, max: 12.0);
        chart.Write();

        Chart chart = new Chart(500, 400, ChartTheme.Blue);//ChartTheme:图表主题
        chart.AddTitle("2014年城市人口统计");
        //提供图表的数据点和系列特性
        chart.AddSeries(
               name: "2014population",//系列的唯一名称 做图例时有用 
            chartType: ChartType.Column.ToString(),//图表类型 柱状图、折线图、饼图... 
            xValue: new List<string>() { "北京", "上海", "广州", "深圳", "重庆" },//要沿 X 轴绘制的值
            yValues: new List<float>() { 1962.24f, 2301.91f, 1270.08f, 1035.79f, 2884.62f }//要沿 Y 轴绘制的值 
        );

        chart.SetXAxis("城市");
        chart.SetYAxis("人口");
        chart.Write();

        Chart t2 = new Chart(width: 800, height: 600, theme: ChartTheme.Blue)
        .AddTitle("2013~2014城市人口统计")
        .AddLegend("年份")
        .SetXAxis("城市")
        .SetYAxis("人口 【单位:万人】")
        .AddSeries(
        name: "2013年",
        xValue: new[] {
            "北京",
            "上海",
            "广州",
            "深圳",
            "重庆" },
        yValues: new[] {
            1962.24f,
            2301.91f,
            1270.08f,
            1035.79f,
            2884.62f
            }
        )
        .AddSeries(
        name: "2014年",
        xValue: new[] {
            "北京",
            "上海",
            "广州",
            "深圳",
            "重庆" },
        yValues: new[] {
            234.24f,
            4234.91f,
            2342.08f,
            4234.79f,
            2342.62f
            }
        )
        .Write();

知识共享许可协议
《MVC 内置图表组建的简单使用》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告