Asp.NET Core制作图表

最新推荐文章于 2022-11-21 10:20:13 发布

weixin_33874713

最新推荐文章于 2022-11-21 10:20:13 发布

阅读量1.3k

点赞数

文章标签：测试 javascript runtime ViewUI

原文链接：http://www.cnblogs.com/fzqm-lwz/p/9704973.html

版权

本文介绍了如何在Asp.NET Core项目中创建折线图、条形图和饼图。首先，创建一个名为`HighchartsNETCore`的类库项目，并通过NuGet安装`Razor.Runtime`。接着，创建`HighChartsTagHelper`类和`HomeController`，并在控制器中编写代码。在视图中引入必要的模型和JS代码。最后，运行项目，查看生成的图表。该教程适合初学者，参考了LineZero's Blog的相关项目。

摘要由CSDN通过智能技术生成

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")]