利用MVC Chart 打造後臺圖表、前端圖表

時間 2019-11-30

標籤利用 mvc chart 打造後臺圖表前端简体版

原文原文鏈接

　　應用場景是這個樣子的：要作導出數據到PDF的功能，涉及到文本、表格、圖表等內容。在作圖表功能時，發現以前用Highcharts作的圖表根本就不能集成到PDF中。這裏須要一個能在程序後臺就生成圖表的功能，經過兩個步驟進行集成：前端

　　1）將圖表生成到一個圖片文件中，存儲在服務器上；服務器

　　2）根據指定的圖片路徑，將圖片集成到PDF。ide

　　那麼集成的核心就爲：如何在.net程序後臺就生成一個圖表。url

　　這裏介紹的是：spa

　　　　1）如何利用 Mvc Chart在程序的後臺生成圖表；.net

　　　　2）如何利用 Mvc Chart在前端生成圖表。插件

　　必要條件：添加 using System.Web.Helpers;引用code

1、在程序後臺生成圖表

　　先看下生成的效果：對象

製做這樣一個圖表，須要通過如下幾個步驟：blog

Step 1：建立圖表對象

Chart chart = new Chart(500, 400, ChartTheme.Blue);//ChartTheme:圖表主題

Step 2：添加圖表標題

chart.AddTitle(「2014年城市人口統計」);

Step 3：提供圖表的數據點和系列特性，它包含如下幾個部分

//提供圖表的數據點和系列特性
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 軸繪製的值 
);

Step 4:設置X軸和Y軸的值

chart.SetXAxis(「城市」);
chart.SetYAxis(「人口」);

Step 5:保存圖片

chart.Save(「D:\2014population.jpeg」);

　　如今，打完收功。名爲：2014population.jpeg的圖片就已經生成在指定的路徑下了。有沒有以爲很簡單、快速?

　　可如今是一個Y軸只有一個值，當有多個值時怎麼辦呢？即要使之達到下面這樣的效果：

　　如今，咱們經過在前臺生成的方式來看這樣的效果是如何達到的：

二：在程序前端生成圖表

　　在前面的第三步：Step 3：提供圖表的數據點和系列特性裏，提供了生成圖表的數據來源。若是要使一個Y軸對象有多個值，達到上面的效果，只須要再寫一個 AddSeries(... ...)，便可。除此以外，你還須要：

　　將 .Save(...)修改成：.Write()

　　是的，前臺和後臺生成圖表的差異，就只有這一處。來看看在前端生成圖表的完整代碼：

    <div>
        @{
            Chart t2 = new Chart(width: 500, height: 300, 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();
        }
    </div>

View Code

三：封裝

　　爲方便圖片的生成，對在後臺生成的代碼作以下的封裝：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Helpers;

namespace Seal_Common
{
    /// <summary>
    /// 繪製圖表，並保存在服務器中[必要引用::System.Web.Helpers]
    /// </summary>
    public class ChartHelper
    {
        private const int chartWidth = 380;
        private const int chartHeight = 300;
        /// <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,
    }
    #region 使用方式
    //            ChartHelper charthelper = new ChartHelper();
    //            string saveurl = @"C:\Users\zq\Documents\visual studio 2013\Projects\Seal_Main\Seal_Console\bin\Debug\PDFDOCUMENT\123.jpeg";
    //            List<string> names = new List<string>() { 
    //                "北京",
    //                "上海",
    //                "廣州",
    //                "深圳",
    //                "重慶"
    //            };
    //            List<float> values = new List<float>() { 
    //                1962.24f,
    //                2301.91f,
    //                1270.08f,
    //                1035.79f,
    //                2884.62f
    //            };
    //            charthelper.GenerateChart("2013~2014城市人口統計", names, values, saveurl, ChartType.Column, 500, 400, "城市", "人口", ChartTheme.Vanilla);
    #endregion
}