Asp.NET Core制作圖表

本文轉載自查看原文 2018-09-26 09:17 1567

Asp.NET Core制作圖表（折線圖，條形圖和餅圖）

第一步：在原有項目的解決方案右鍵-->添加-->新建項目，在彈出框選中“類庫（.net core）”,類名設為“HighchartsNETCore”

圖1

展開HighchartsNETCore，在其下的“依賴項”右鍵選中“管理NuGet程序包” ，在彈出框輸入“Razor.Runtime” ,並安裝圖3藍色選中部分。

圖2

圖3

第二步：在HighchartsNETCore右鍵添加類，類名為HighChartsTagHelper，接下來在它里面寫代碼:

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace HighchartsNETCore
{
    public class HighChartsTagHelper : TagHelper
    {
        /// <summary>
        /// 圖表標題
        /// </summary>
        [HtmlAttributeName("title")]
        public string Title { get; set; }
        /// <summary>
        /// 圖表類型
        /// </summary>
        [HtmlAttributeName("type")]
        public ChartType Type { get; set; }
        /// <summary>
        /// 圖表2級標題
        /// </summary>
        [HtmlAttributeName("subtitle")]
        public string SubTitle { get; set; }

        /// <summary>
        /// 數據對象
        /// </summary>
        [HtmlAttributeName("series")]
        public ChartsSeries Series { get; set; }

        /// <summary>
        /// 一些附加選項
        /// </summary>
        [HtmlAttributeName("plotoptions")]
        public string PlotOptions { get; set; }
        /// <summary>
        /// X軸選項
        /// </summary>
        [HtmlAttributeName("xAxis")]
        public List<object> XAxis { get; set; }
        /// <summary>
        /// Y軸選項 默認可以只填名稱
        /// </summary>
        [HtmlAttributeName("yAxis")]
        public string YAxis { get; set; }

        /// <summary>
        /// 提示格式
        /// </summary>
        [HtmlAttributeName("Tooltip")]
        public string Tooltip { get; set; }
        /// <summary>
        /// 圖表層id（容器）
        /// </summary>
        [HtmlAttributeName("id")]
        public string Id { get; set; }

        /// <summary>
        /// 圖標下方標識是否顯示 默認不顯示
        /// </summary>
        [HtmlAttributeName("legend")]
        public bool Legend { get; set; }

        /// <summary>
        /// 高級功能，多個數據集，多條圖表，餅圖不需要。
        /// </summary>
        [HtmlAttributeName("serieslist")]
        public List<ChartsSeries> SeriesList { get; set; }

        [HtmlAttributeName("width")]
        public int Width { get; set; }

        [HtmlAttributeName("height")]
        public int Height { get; set; }

        private void HighChartsJs(StringBuilder jscode)
        {
            jscode.Append("$(function(){$('#" + Id + "').highcharts({ ");
            jscode.Append("credits: { enabled: false },");
            jscode.Append("chart:{ type: '" + Type.ToString().ToLower() + "'");
            if (Width > 0)
                jscode.Append(",width:" + Width);
            if (Height > 0)
                jscode.Append(",height:" + Height);
            jscode.Append("},");
            if (!string.IsNullOrEmpty(Title))
                jscode.Append("title: { text: '" + Title + "'},");
            if (!string.IsNullOrEmpty(SubTitle))
                jscode.Append("subtitle: { text: '" + SubTitle + "'},");
            //判斷類型及數據顯示
            if (XAxis != null && Type != ChartType.Pie)
            {
                XAxisToString(jscode, XAxis);
            }
            else if (Series.SeriesData != null && Type != ChartType.Pie)
            {
                XAxisToString(jscode, Series.SeriesData.Keys.ToList());
            }
            else if (SeriesList != null && SeriesList.Count > 0)
            {
                XAxisToString(jscode, SeriesList[0].SeriesData.Keys.ToList());
            }
            if (!string.IsNullOrEmpty(YAxis))
            {
                if (YAxis.IndexOf("title") < 0)
                {
                    jscode.Append("yAxis: { title:{ text:'" + YAxis + "'}},");
                    if (string.IsNullOrEmpty(Tooltip))
                        jscode.Append("tooltip: { valueSuffix:'" + YAxis + "' },");
                }
                else
                {
                    jscode.Append("yAxis: {" + YAxis + "},");
                }
            }
            jscode.Append("legend: { enabled: " + Legend.ToString().ToLower() + " },");
            if (!string.IsNullOrEmpty(Tooltip))
                jscode.Append("tooltip: {" + Tooltip + "},");
            if (!string.IsNullOrEmpty(PlotOptions))
                jscode.Append("plotOptions:{" + PlotOptions + "},");
            //數據處理方法
            SeriesToString(jscode);
            jscode.Append(" }); });");
        }

        private void SeriesToString(StringBuilder sb)
        {
            sb.Append("series: [");
            string seriesdata = string.Empty;
            if (Series.SeriesData != null)
            {
                seriesdata = SeriesDataToString(Series);
            }
            if (SeriesList != null && SeriesList.Count != 0)
            {
                foreach (ChartsSeries ser in SeriesList)
                {
                    seriesdata += SeriesDataToString(ser) + ",";
                }
                seriesdata = seriesdata.TrimEnd(',');
            }
            sb.Append(seriesdata);
            sb.Append("]");
        }

        /// <summary>
        /// 數據部分轉成js代碼
        /// </summary>
        /// <param name="series"></param>
        /// <returns></returns>
        private string SeriesDataToString(ChartsSeries series)
        {
            string seriesdata = "{ name: '" + series.SeriesName + "',data:[";
            foreach (var item in series.SeriesData)
            {
                seriesdata += "['" + item.Key + "'," + item.Value + "],";
            }
            seriesdata = seriesdata.TrimEnd(',');
            seriesdata += "] }";
            return seriesdata;
        }
        /// <summary>
        /// x軸上數據轉換
        /// </summary>
        /// <param name="sb"></param>
        /// <param name="xAxis"></param>
        private void XAxisToString(StringBuilder sb, List<object> xAxis)
        {
            sb.Append("xAxis: { categories: [");
            string xaxis = string.Empty;
            foreach (var item in xAxis)
            {
                xaxis += "'" + item + "',";
            }
            xaxis = xaxis.TrimEnd(',');
            sb.Append(xaxis);
            sb.Append("]},");
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (Series == null) return;
            output.Attributes.SetAttribute("title", "HighchartsNET自動生成 By:LineZero");
            output.Attributes.SetAttribute("id", Id);
            StringBuilder style = new StringBuilder("margin:0px auto;min-width:400px;");
            if (Width > 0)
                style.Append($"width:{Width}px;");
            if (Height > 0)
                style.Append($"heigth:{Height}px;");
            output.Attributes.SetAttribute("style", style.ToString());
            output.TagName = "div";
            StringBuilder innerhtml = new StringBuilder();
            innerhtml.Append("<script>");
            HighChartsJs(innerhtml);
            innerhtml.Append("</script>");
            output.PostElement.AppendHtml(innerhtml.ToString());
        }

        public class ChartsSeries
        {
            public object SeriesName { get; set; }
            public Dictionary<object, object> SeriesData { get; set; }
        }
        public enum ChartType
        {
            Column,
            Pie,
            Line,
            Bar
        }
    }
}

View Code

新建一個名為HomeController的控制器，直接上代碼：

補充說明：（先在Models添加一個Tasks(與數據庫同名)模型，Tasks里面包含字段Teachername）

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using System.Data;

using System.Text;

using lwz.Models;

using Microsoft.EntityFrameworkCore;

using MySql.Data.MySqlClient;

using lwz.Date;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.AspNetCore.Http;

using System.Net.Http.Headers;

using System.IO;

using static HighchartsNETCore.HighChartsTagHelper;

 

namespace lwz.Controllers

{

    public class HomeController : Controller

    {

 

        private DataContext con;

 

        public HomeController(DataContext context)

        {

            this.con = context;

        }//通過析構函數來依賴注入

 

        public IActionResult Index()

        {

            //ChartsSeries series = new ChartsSeries();

            //Dictionary<object, object> dic = new Dictionary<object, object>();

            //Random r = new Random();

            //for (int i = 0; i < 12; i++)

            //{

            //    dic.Add(DateTime.Now.AddDays(i).ToString("yyyyMMdd"), r.Next(20));

            //}

            //series.SeriesName = "溫度";

            //series.SeriesData = dic;

            //ViewBag.Series = series;

            return View();

           

        }

 

        public IActionResult ChartHomeworkCount()//單獨增加數據

        {

            ChartsSeries series = new ChartsSeries();

            Dictionary<object, object> dic = new Dictionary<object, object>();

 

            var Tasks = from p in con.Tasks

                        select p;

           

            var Tasks1 = Tasks.Where(d => d.Teachername == "宋光");

            dic.Add("宋光", Tasks1.Count());

            Tasks = from p in con.Tasks

                    select p;          

 

            var Tasks2 = Tasks.Where(d => d.Teachername == "習一平");

            dic.Add("習一平", Tasks2.Count());

            Tasks = from p in con.Tasks

                    select p;

 

            var Tasks3 = Tasks.Where(d => d.Teachername == "梁老師");

            dic.Add("梁老師", Tasks3.Count());

            Tasks = from p in con.Tasks

                    select p;

 

            var Tasks4 = Tasks.Where(d => d.Teachername == "馬玉");

            dic.Add("馬玉", Tasks4.Count());

            Tasks = from p in con.Tasks

                    select p;

 

            var Tasks5 = Tasks.Where(d => d.Teachername == "郭老師");

            dic.Add("郭老師", Tasks5.Count());

            Tasks = from p in con.Tasks

                    select p;

 

            var Tasks6 = Tasks.Where(d => d.Teachername == "李家寶");

            dic.Add("李家寶", Tasks6.Count());

            Tasks = from p in con.Tasks

                    select p;

 

 

            series.SeriesName = "作業量/條";

            series.SeriesData = dic;

            ViewBag.Series = series;

            return View();

        }

 

        public IActionResult Index3()//循環讀取多條數據

        {

            //ChartsSeries series = new ChartsSeries();

            //Dictionary<object, object> dic = new Dictionary<object, object>();

            //var kucuns = from p in con.kucun

            //             select p;

            //for (int i = 1; i <= kucuns.Count(); i++) 

            //{

            //    var kucunnum = kucuns.Where(d => d.KucunId == i).FirstOrDefault();

            //    dic.Add(kucunnum.Name, kucunnum.Number);

            //}

            //series.SeriesName = "商品庫存量";

            //series.SeriesData = dic;

            //ViewBag.Series = series;

            return View();

        }

    } 

}

HomeController

在_ViewImports.cshtml里引入（其中lwz為我原有的項目名，你們因名而異）

1 @using lwz
2 @using lwz.Models
3 @using lwz.Date
4 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
5 @addTagHelper *,HighchartsNETCore

_ViewImports.cshtml

在名為Home的文件夾下添加視圖ChartHomeworkCount.cshtml視圖，直接上代碼：

補充：（記得要先引用js代碼）

@{
    ViewData["Title"] = "ChartHomeworkCount";
}
<h2><a asp-controller="Teacher" asp-action="TeacherTasks" class="btn btn-default">返回布置作業頁面</a></h2>
@*<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>*@
@*把地址上的代碼復制到自己的項目里，就不用每次都需要聯網才可以使用script了*@
<script src="~/js/jquery-1.8.3.min.js"></script>
<script src="~/js/highchartst.js"></script>
<div>
    <high-charts id="demoline" title="信息班各老師布置作業數量線圖" subtitle="各種類數量統計" type="Line" series="ViewBag.Series"></high-charts>
    <high-charts id="democolumn" title="信息班各老師布置作業數量柱圖" subtitle="各種類數量統計" type="Column" series="ViewBag.Series"></high-charts>
    <high-charts id="demopie" title="信息班各老師布置作業數量餅圖" subtitle="各種類數量統計" type="Pie" series="ViewBag.Series"></high-charts>
</div>

View Code

第三步？當然是運行啦，看結果，似不似很牛X?

ps:此文為本人整合別人的博客寫的，若有冒犯之處，敬請原諒。只因本人是菜鳥，所以比大牛寫的詳細點，只供學習所用。

大牛LineZero's Blog的源項目：https://github.com/linezero/HighchartsNET

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ASP.NET Core入門（一） WebSocket In ASP.NET Core(一) WebSocket In ASP.NET Core(二) ASP.NET Core SignalR ASP.NET Core ---日志 ASP.NET Core - 開篇 ASP.NET Core (一)：簡介 ASP.NET Core WebApi ASP.NET Core DevOps asp.net core教程（一）