MVC uses Dotnet.highcharts to do chart 01, area chart

Dotnet.highcharts is a good choice if you want to use the chart display in MVC. Dotnet.highcharts is an open source JavaScript library that supports dozens of icons such as line charts, column icons, and pie icons. This article implements a simple area chart.

Enter the keyword "dotnet.highcharts" in NuGet.

After installation, there are more highcharts related files under scripts and assemblies.

The HomeController.

usingSystem.Collections.Generic;usingSYSTEM.WEB.MVC;usingDotnet.highcharts;usingDotNet.Highcharts.Enums;usingDotNet.Highcharts.Helpers;usingDotNet.Highcharts.Options;namespacemyhighcharts.controllers{ Public classHomecontroller:controller { PublicActionResult Index () {//Create Zone 1            varSeries1 =NewSeries (); Series1. Name="Area One"; //poin Arraypoint[] Series1points =            {                NewPoint () {X =0.0, Y =0.0},                 NewPoint () {X =10.0, Y =0.0},                NewPoint () {X =10.0, Y =10.0},                NewPoint () {X =0.0, Y =10.0}            }; Series1. Data=NewData (series1points); //Create Zone 2            varSeries2 =NewSeries (); Series2. Name="Zone Two"; //Point Arraypoint[] Series2points =                {                    NewPoint () {X =5.0, Y =5.0},                    NewPoint () {X =15.0, Y =5.0},                    NewPoint () {X =15.0, Y =15.0},                    NewPoint () {X =5.0, Y =15.0}                }; Series2. Data=NewData (series2points); //Add 2 regions to a series collection            varChartSeries =NewList<series>();            Chartseries.add (SERIES1);            Chartseries.add (Series2); //Create a chart model            varChart1 =NewHighcharts ("My first area chart"); Chart1. Initchart (NewChart () {Defaultseriestype =Charttypes.area}). Settitle (NewTitle () {Text ="My first area chart"})                .            Setseries (Chartseries.toarray ()); Viewbag.chartmodel=Chart1; returnView (); }    }}

The HOME/INDEX.CSTHML.

@{Layout=NULL;}<! DOCTYPE html>"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>@ ((DotNet.Highcharts.Highcharts) Viewbag.chartmodel)</div></body>