MVC使用Dotnet.HighCharts做图表01,区域图表

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

3


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

 

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


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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值