首页 / HIGHCHARTS / MVC使用Dotnet.HighCharts做图表01,区域图表

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了MVC使用Dotnet.HighCharts做图表01,区域图表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1973字，纯文字阅读大概需要3分钟。

内容图文

如果想在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);

            //创建区域2var 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 modelvar 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>

原文：http://www.cnblogs.com/darrenji/p/3840628.html

内容总结

以上是互联网集市为您收集整理的MVC使用Dotnet.HighCharts做图表01,区域图表全部内容，希望文章能够帮你解决MVC使用Dotnet.HighCharts做图表01,区域图表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1141756.html

来源：【匿名】