如果想在MVC中使用图表显示的话，DotNet.HighCharts是不错的选择。DotNet.HighCharts是一个开源的JavaScript图表库，支持线型图表、柱状图标、饼状图标等几十种图标。本篇实现一个简单的区域图表。

在NuGet中输入关键字"DotNet.HighCharts"。

安装完后，在Scripts和程序集下多了HighCharts相关文件。

HomeController中。

using System.Collections.Generic;

using System.Web.Mvc;

using DotNet.Highcharts;

using DotNet.Highcharts.Enums;

using DotNet.Highcharts.Helpers;

using DotNet.Highcharts.Options;

namespace MyHighCharts.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            //创建区域1

            var series1 = new Series();

            series1.Name = "区域一";

            //Poin数组

            Point[] series1Points =

            {

                new Point(){X = 0.0, Y = 0.0},

                new Point() {X = 10.0, Y = 0.0},

                new Point() {X = 10.0, Y = 10.0},

                new Point() {X = 0.0, Y = 10.0}

            };

            series1.Data = new Data(series1Points);

            //创建区域2

            var series2 = new Series();

            series2.Name = "区域二";

            //Point数组

            Point[] series2Points =

                {

                    new Point() {X = 5.0, Y = 5.0},

                    new Point() {X = 15.0, Y =5.0},

                    new Point() {X = 15.0, Y = 15.0},

                    new Point() {X = 5.0, Y = 15.0}

                };

            series2.Data = new Data(series2Points);

            //把2个区域加入到Series集合中

            var chartSeries = new List<Series>();

            chartSeries.Add(series1);

            chartSeries.Add(series2);

            //创建chart model

            var chart1 = new Highcharts("我的第一个区域图表");

            chart1.InitChart(new Chart() {DefaultSeriesType = ChartTypes.Area})

                .SetTitle(new Title() {Text = "我的第一个区域图表"})

                .SetSeries(chartSeries.ToArray());

            ViewBag.ChartModel = chart1;

            return View();

        }

    }

}

Home/Index.csthml中。

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Scripts/jquery-2.0.0.js"></script>

    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>

</head>

<body>

    <div>

        @((DotNet.Highcharts.Highcharts)ViewBag.ChartModel)

    </div>

</body>

</html>

MVC使用Dotnet.HighCharts做图表01,区域图表的更多相关文章

  1. 利用MVC Chart 打造后台图表、前端图表

    应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本.表格.图表等内容.在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中.这里需要一个能在程序后台就生成图表的功能 ...

  2. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  3. Highcharts.js －纯javasctipt图表库初体验

    一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...

  4. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  5. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  6. Core开发-MVC 使用dotnet 命令创建Controller和View

    NET Core开发-MVC 使用dotnet 命令创建Controller和View   使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使 ...

  7. Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  8. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  9. win10 uwp 使用 asp dotnet core 做图床服务器客户端

    原文 win10 uwp 使用 asp dotnet core 做图床服务器客户端 本文告诉大家如何在 UWP 做客户端和 asp dotnet core 做服务器端来做一个图床工具   服务器端 从 ...

随机推荐

  1. 10 个优质的 Laravel 扩展推荐

    这里有 10+ 个用来搭建 Laravel 应用的包 为何会创建这个包的列表?因为我是一个「比较懒」的开发者,在脸书上是多个 Laravel 小组的成员.平日遇到最多的问题就是开发是需要用那些包.我很 ...

  2. python版本共存

    要玩多版本最好使用虚拟环境,避免根python切换及包误安装的麻烦 1.直接安装实现 1.1 windows下 到官网(https://www.python.org/downloads/)下载,如py ...

  3. （一）问候MyBatis3

    第一节:MyBatis简介 百度百科 第二季:Mybatis版HolleWorld实现 例子: mybatis-config.xml: <?xml version="1.0" ...

  4. 安装部署Apache Hadoop (完全分布式模式并且实现NameNode HA和ResourceManager HA)

    本节内容: 环境规划 配置集群各节点hosts文件 安装JDK1.7 安装依赖包ssh和rsync 各节点时间同步 安装Zookeeper集群 添加Hadoop运行用户 配置主节点登录自己和其他节点不 ...

  5. 查询SQL优化

    SQL优化的一般步骤 通过show status命令了解各种SQL的执行频率定位执行效率较低的SQL语句,重点select通过explain分析低效率的SQL确定问题并采取相应的优化措施 优化措施 s ...

  6. Linux mint 17.3系统安装及常用开发办公软件部署

    关于为什么选择linuxmint17.3作为个人办公开发系统的选择说明: 编者按]提起Linux系统,大家可能最先想到的就是 Linux Mint 和 Ubuntu 两个版本了.近来,开源界貌似激进了 ...

  7. 【洛谷】P2000 拯救世界

    题解 小迪的blog : https://www.cnblogs.com/RabbitHu/p/9178645.html 请大家点推荐并在sigongzi的评论下面点支持谢谢! 掌握了小迪生成函数的有 ...

  8. 【LOJ】#2306. 「NOI2017」蔬菜

    题解 从后往前递推 如果我们知道了第i天的最优方案和第i天选择的蔬菜,加入第i天选择的蔬菜数量为S,我们只需要减去最小的S - (i - 1) * M 个蔬菜即可 所以我们只要求出最后一天的蔬菜选择 ...

  9. Ionic入门三：列表

    列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到. 列表可以是基本文字.按钮,开关,图标和缩略图等. 列表项可以是任何的HTML元素.容器元素需要list类,每个列表项需要使用item类 ...

  10. C# 动态类型与动态编译简介

    关于C#的动态类型与动态编译的简介,主要是一个Demo. 动态类型 关键字: dynamic 这里有详细的介绍:[C#基础知识系列]专题十七:深入理解动态类型 动态类型的应用场景 可以减少强制转换(强 ...