[Перевод] Использование ASP.NET Charting в ASP.NET MVC
Еще одна статья-перевод от MuzhyK.
Рассмотрим как можно использовать элемент управления ASP.NET Charting в приложениях ASP.NET MVC.
Для начала создадим ASP.NET MVC приложение и добавим сборку System.Web.DataVisualization с помощью Add Reference. Затем к нашему проекту добавим класс ChartResult (название класса может быть любым), который унаследуем от класса FileResult. Этот класс будет содержать объявления для MIME типов. Поскольку этот класс наследуется от класса FileResults из System.Web.Mvc, то мы должны переопределить метод WriteFile, который принимает в качетсве параметра обьект HttpResponseBase. Метод WriteFile затем может быть использован для создания потока памяти Output.
Вот как будет выглядеть класс:
public class ChartResult :
FileResult
{
private const
int _bufferSize = 0x1000;
public ChartResult(Chart chart,
ChartImageFormat imageFormat)
: base(MapImageFormatToMimeType(imageFormat))
{
if (null
==
chart) throw new
ArgumentNullException("chart");
this.Chart = chart;
this.ImageFormat
= imageFormat;
}
public ChartResult(Chart chart)
: this(chart,
ChartImageFormat.Png)
{
}
public Chart Chart
{
get;
private set;
}
public ChartImageFormat
ImageFormat
{
get;
private set;
}
private static
string
MapImageFormatToMimeType(ChartImageFormat
imageFormat)
{
switch (imageFormat)
{
case ChartImageFormat.Png:
return
"image/png";
case ChartImageFormat.Jpeg:
return
"image/jpeg";
case ChartImageFormat.Gif:
return
"image/gif";
case ChartImageFormat.Bmp:
return
"image/bmp";
case ChartImageFormat.Tiff:
return
"image/tiff";
// TODO: MIME types for EMF?
// case ChartImageFormat.Emf:
// case ChartImageFormat.EmfPlus:
// case ChartImageFormat.EmfDual:
default:
throw new
ArgumentException("Unsupported format");
}
}
protected override
void WriteFile(HttpResponseBase
response)
{
// NB: Can't save directly to the
output stream,
// as most image formats require a
seekable
stream.
using (var
imageStream = new MemoryStream())
{
this.Chart.SaveImage(imageStream,
this.ImageFormat);
imageStream.WriteTo(response.OutputStream);
}
}
}
Обратите внимание на то, что при использовании классов ChartResult і FileResult элемент управления ASP.NET Charting будет представлятся как файл изображения на вашем MVC View. Теперь давайте посмотрим как ChartResult может быть использован для представления диаграммы ASP.NET Charting как изображения.
Давайте посмотрим как будет выглядеть View Page:
Есть две возможности для визуализации изображения, мы могли бы
создать ViewPage
в MVC, который только предоставляет изображения или просто
использовать тег
и определить его источник Action Method в Controller.
Home/BarChart и Home/PieChart - два MVC вида, которые используются для отображения результата. Если вы считаете лишним создание вида только для отображения рисунка вы правы :). Таким образом, третья строка в приведенном выше фрагменте показывает, как атрибут изображения тег src может быть использован для отображения рисунка. Мы предоставляем атрибут src методу Action Method, который возвращает FileResult.
Теперь посмотрим как будет выглядеть код для Controller (обратите внимание, этот код не обязательно должен быть в Controller, он вставлен для легкой демонстрации результатов).
Ниже показано как может быть создан BarChart:
public ChartResult BarChart()
{
Chart chart = new Chart();
chart.Width = 480;
chart.Height = 300;
chart.RenderType = RenderType.ImageTag;
chart.Palette = ChartColorPalette.Fire;
Title t = new Title("Bar
Chart", Docking.Left, new
Font("Trebuchet
MS",
14, FontStyle.Bold), Color.Black);
chart.Titles.Add(t);
chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chart.BorderlineWidth = 2;
chart.BorderlineColor = Color.Black;
chart.BorderlineDashStyle = ChartDashStyle.Solid;
chart.ChartAreas.Add("Default");
chart.Legends.Add("Legend1");
chart.Series.Add("Series 1");
chart.Series.Add("Series 2");
List
data.Add(3);
data.Add(9);
data.Add(5);
data.Add(2);
data.Add(4);
data.Add(7);
//Series 1
foreach (int
value in
data)
{
chart.Series["Series 1"].Points.AddY(value);
}
//Series 2
foreach (int
value in
data)
{
chart.Series["Series 2"].Points.AddY(value - 1);
}
return new
ChartResult(chart, ChartImageFormat.Png);
}
Ниже показано как может быть создан PieChart:
public ChartResult PieChart()
{
Chart pieChart = new
Chart();
pieChart.Width = 480;
pieChart.Height = 300;
pieChart.RenderType = RenderType.ImageTag;
pieChart.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("Pie
Chart", Docking.Left, new
Font("Trebuchet
MS",
14, FontStyle.Bold), Color.Black);
pieChart.Titles.Add(t);
pieChart.ChartAreas.Add("defaultChartArea");
pieChart.Legends.Add("Legend1");
pieChart.Series.Add("PieChartSeries");
// Initialize an array of doubles
double[] yval = { 2, 6, 4,
5, 3 };
// Initialize an array of strings
string[] xval = {
"Peter", "Andrew",
"Julie", "Mary",
"Dave" };
pieChart.Series["PieChartSeries"].ChartType
= SeriesChartType.Pie;
// Set series visual attributes
pieChart.Series["PieChartSeries"].Color
=
Color.CornflowerBlue;
pieChart.Series["PieChartSeries"].BackSecondaryColor
= Color.SkyBlue;
pieChart.Series["PieChartSeries"].BorderColor
= Color.Gray;
pieChart.Series["PieChartSeries"].BorderWidth
= 2;
pieChart.Series["PieChartSeries"].BorderDashStyle
= ChartDashStyle.Solid;
pieChart.Series["PieChartSeries"].ShadowOffset
= 2;
//Bind the data to chart
pieChart.Series["PieChartSeries"].Points.DataBindXY(xval,
yval);
//Turn on Legend
pieChart.Series["PieChartSeries"]["PieLabelStyle"] = "Disabled";
//Turn on Labelling
pieChart.Series["PieChartSeries"]["PieLabelStyle"] = "Inside";
//Make the Leged to display text
and percentage
pieChart.Series["PieChartSeries"].LegendText
= "#AXISLABEL - #PERCENT{P0}";
return new
ChartResult(pieChart, ChartImageFormat.Png);
}
Ниже показано как может быть создан LineChart:
public ChartResult LineChart()
{
Chart lineChart = new
Chart();
lineChart.Width = 480;
lineChart.Height = 300;
lineChart.RenderType = RenderType.ImageTag;
lineChart.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("Line
Chart", Docking.Left, new
Font("Trebuchet
MS",
14, FontStyle.Bold), Color.Black);
lineChart.Titles.Add(t);
lineChart.ChartAreas.Add("defaultChartArea");
lineChart.Legends.Add("Legend1");
lineChart.Series.Add("LineChartSeries");
lineChart.Series["LineChartSeries"].ChartType
= SeriesChartType.Line;
// Set series visual attributes
lineChart.Series["LineChartSeries"].Color
= Color.Red;
lineChart.Series["LineChartSeries"].BackSecondaryColor
= Color.SkyBlue;
lineChart.Series["LineChartSeries"].BorderColor
= Color.Gray;
lineChart.Series["LineChartSeries"].BorderWidth
= 2;
lineChart.Series["LineChartSeries"].BorderDashStyle
= ChartDashStyle.Solid;
lineChart.Series["LineChartSeries"].ShadowOffset
= 2;
// Populate series with random
data
Random random = new
Random();
for (int
pointIndex = 0; pointIndex < 15; pointIndex++)
{
lineChart.Series["LineChartSeries"].Points.AddY(random.Next(45,
95));
}
return new
ChartResult(lineChart, ChartImageFormat.Png);
}
При запуске приложения вы можете увидеть две ссылки и рисунок, отображаемый на главной странице.
BarChart:
PieChart:
Дополнительные ссылки: