標籤：style blog http java color 使用
如果想在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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
