Сложные графики и диаграммы в ASP.NET. Часть третья — HttpHandlerSystem.Drawing


Оглавление (нажмите, чтобы открыть):

Chart Control и графики функций

Доброго времени суток.
Есть квадратичная функция, параметры и свободный член генерируются рандомом.
Как можно нарисовать график этой функции в Chart, ну или используя любой другой вариант рисования?

Добавлено через 5 часов 27 минут
Всё еще актуально.

15.05.2013, 21:31

Chart control: можно ли как-то убрать значения х непосредственно из графика
Добрый вечер. Скажите пожалуйста , можно ли как-то убрать значения х непосредственно из графика.

Pie Chart — диаграммы и графики
Нужен бесплатный компонент для рисования графиков, диаграм для ASP, простого аспа 😉 Магет кто.

графики Chart
Можно в chart аппроксимирующую кривую построить? То есть у меня массив данных есть и из них надо.

Какая разница между Web server control, Composite control и User Control
Подскажите, пожалуйста, какая разница между Web server control, Composite control и User Control, а.

3d графики функций в C#
Посоветуйте пожалуйста какой-то инструмент для построения графиков, таких как на рисунку.

Основы библиотеки System.Drawing

Пространство имен System.Drawing обеспечивает доступ к функциональным возможностям графического интерфейса GDI+.
Пространства имен:

  • System.Drawing.Drawing2D,
  • System.Drawing.Imaging,
  • System.Drawing.Text

обеспечивают дополнительные функциональные возможности.

Класс Graphics предоставляет методы рисования на устройстве отображения.
Такие классы, как Rectangle и Point, инкапсулируют элементы GDI+.
Класс Pen используется для рисования линий и кривых, а классы, производные от абстрактного класса Brush, используются для заливки фигур.

Инкапсулирует поверхность рисования GDI+. Этот класс не наследуется.

Методов в этом классе огромное количество, поэтому рассмотрим некоторые из них:

AddMetafileComment Добавляет комментарий к текущему объекту Metafile. BeginContainer() Сохраняет графический контейнер, содержащий текущее состояние данного объекта Graphics, а затем открывает и использует новый графический контейнер. BeginContainer(Rectangle, Rectangle, GraphicsUnit) Сохраняет графический контейнер, содержащий текущее состояние данного объекта Graphics, а также открывает и использует новый графический контейнер с указанным преобразованием масштаба. BeginContainer(RectangleF, RectangleF, GraphicsUnit) Сохраняет графический контейнер, содержащий текущее состояние данного объекта Graphics, а также открывает и использует новый графический контейнер с указанным преобразованием масштаба. Clear Очищает всю поверхность рисования и выполняет заливку поверхности указанным цветом фона. CopyFromScreen(Point, Point, Size) Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics. CopyFromScreen(Point, Point, Size, CopyPixelOperation) Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics. CopyFromScreen(Int32, Int32, Int32, Int32, Size) Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics. Dispose Освобождает все ресурсы, используемые данным объектом Graphics. DrawArc(Pen, Rectangle, Single, Single) Рисует дугу, которая является частью эллипса, заданного структурой Rectangle. DrawArc(Pen, Int32, Int32, Int32, Int32, Int32, Int32) Рисует дугу, которая является частью эллипса, заданного парой координат, шириной и высотой. DrawArc(Pen, Single, Single, Single, Single, Single, Single) Рисует дугу, которая является частью эллипса, заданного парой координат, шириной и высотой. DrawBezier(Pen, Point, Point, Point, Point) Рисует кривую Безье, определяемую четырьмя структурами Point. DrawLine(Pen, Point, Point) Проводит линию, соединяющую две структуры Point. DrawLine(Pen, Int32, Int32, Int32, Int32) Проводит линию, соединяющую две точки, задаваемые парами координат. DrawLine(Pen, Single, Single, Single, Single) Проводит линию, соединяющую две точки, задаваемые парами координат. DrawLines(Pen, Point[]) Рисует набор сегментов линий, которые соединяют массив структур Point. DrawPath Рисует объект GraphicsPath. DrawPie(Pen, Rectangle, Single, Single) Рисует сектор, который определяется эллипсом, заданным структурой Rectangle и двумя радиальными линиями. DrawPie(Pen, Int32, Int32, Int32, Int32, Int32, Int32) Рисует сектор, определяемый эллипсом, который задан парой координат, шириной, высотой и двумя радиальными линиями. DrawPie(Pen, Single, Single, Single, Single, Single, Single) Рисует сектор, определяемый эллипсом, который задан парой координат, шириной, высотой и двумя радиальными линиями. DrawPolygon(Pen, Point[]) Рисует многоугольник, определяемый массивом структур Point. DrawRectangle(Pen, Rectangle) Рисует прямоугольник, определяемый структурой Rectangle. DrawRectangle(Pen, Int32, Int32, Int32, Int32) Рисует прямоугольник, который определен парой координат, шириной и высотой. DrawRectangle(Pen, Single, Single, Single, Single) Рисует прямоугольник, который определен парой координат, шириной и высотой. DrawRectangles(Pen, Rectangle[]) Рисует набор прямоугольников, определяемых структурами Rectangle. DrawString(String, Font, Brush, PointF) Создает указываемую текстовую строку в заданном месте с помощью определяемых объектов Brush и Font. DrawString(String, Font, Brush, PointF, StringFormat) Рисует заданную текстовую строку в заданном месте с помощью определяемых объектов Brush и Font, используя атрибуты форматирования заданного формата StringFormat. DrawString(String, Font, Brush, Single, Single) Создает указываемую текстовую строку в заданном месте с помощью определяемых объектов Brush и Font. Equals(Object) Определяет, равен ли заданный объект текущему объекту. (Унаследовано от Object.) ExcludeClip(Rectangle) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Rectangle. ExcludeClip(Region) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Region. FillClosedCurve(Brush, Point[]) Заполняет внутреннюю часть замкнутой фундаментальной кривой, определяемой массивом структур Point. FillClosedCurve(Brush, Point[], FillMode) Заполняет внутреннюю часть замкнутой фундаментальной сплайновой кривой, определяемой массивом структур Point, используя указанный режим заливки. FillClosedCurve(Brush, Point[], FillMode, Single) Заполняет внутреннюю часть замкнутой фундаментальной кривой, определяемой массивом структур Point, используя указанные режим заливки и натяжение. FillEllipse(Brush, Rectangle) Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, который задан структурой Rectangle. FillEllipse(Brush, Int32, Int32, Int32, Int32) Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, заданным с помощью пары координат, ширины и высоты. FillEllipse(Brush, Single, Single, Single, Single) Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, заданным с помощью пары координат, ширины и высоты. FillPath Заполняет внутреннюю часть объекта GraphicsPath. FillPie(Brush, Rectangle, Single, Single) Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан структурой RectangleF, и двумя радиальными линиями. FillPie(Brush, Int32, Int32, Int32, Int32, Int32, Int32) Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан парой координат, шириной, высотой и двумя радиальными линиями. FillPie(Brush, Single, Single, Single, Single, Single, Single) Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан парой координат, шириной, высотой и двумя радиальными линиями. FillPolygon(Brush, Point[]) Заполняет внутреннюю часть многоугольника, определяемого массивом точек, заданных структурами Point. FillPolygon(Brush, Point[], FillMode) Заполняет внутреннюю часть многоугольника, определенного массивом точек, заданных структурами Point, используя указанный режим заливки. FillRectangle(Brush, Rectangle) Заполняет внутреннюю часть прямоугольника, определяемого структурой Rectangle. FillRectangle(Brush, Int32, Int32, Int32, Int32) Заполняет внутреннюю часть прямоугольника, который определен парой координат, шириной и высотой. FillRectangle(Brush, Single, Single, Single, Single) Заполняет внутреннюю часть прямоугольника, который определен парой координат, шириной и высотой. FillRectangles(Brush, Rectangle[]) Заполняет внутреннюю часть набора прямоугольников, определяемых структурами Rectangle. FillRegion Заполняет внутреннюю часть объекта Region. Flush() Вызывает принудительное выполнение всех отложенных графических операций и немедленно возвращается, не дожидаясь их окончания. Flush(FlushIntention) Вызывает принудительное выполнение всех отложенных графических операций. При этом в соответствии с настройкой метод дожидается или не дожидается окончания операций для возврата.

Класс — Pen

Определяет объект, используемый для рисования прямых линий и кривых. Этот класс не наследуется.

Pen(Color) Инициализирует новый экземпляр класса Pen с указанным цветом.
Pen(Color, Single) Инициализирует новый экземпляр класса Pen с указанными свойствами Color и Width. (Width — устанавливает ширину пера Pen, в единицах объекта Graphics, используемого для рисования)

Класс — Brush

Определяет объекты, которые используются для заливки внутри графических фигур, таких как прямоугольники, эллипсы, круги, многоугольники и дорожки.

Это абстрактный базовый класс, который не может быть реализован.Для создания объекта «кисть» используются классы, производные от Brush, такие как SolidBrush, TextureBrush и LinearGradientBrush.

Двумерная графика на C#, классы Graphics, Pen и Brush

На примере графики наглядно видны преимущества ООП, смысл использования классов, их методов и свойств. Добавляя в пространство имен своего проекта соответствующие библиотеки, вы получаете сразу набор инструментов, необходимых для графики. Это графические примитивы (линии, прямоугольники, эллипсы и т.п.), перо для черчения, кисть для закраски и много других полезных объектов и методов.

2D-графика делится, как вы знаете, на растровую и векторную. Растровое изображение — это набор цветных пикселей, заданных в прямоугольной области, хранящихся в файлах *.bmp, *.jpg, *.png и т.п. Самый простой растровый редактор — программа Paint. Векторная графика намного экономнее (по объемам памяти) растровой. Так для рисования прямоугольника достаточно задать координаты двух точек (левого верхнего и правого нижнего углов) и цвет и толщину линии. В этом разделе в основном рассмотрим методы векторной графики.

Пространство имен System.Drawing (Рисование) обеспечивает доступ к функциональным возможностям графического интерфейса GDI+ , используя около 50 (!) классов, в том числе класс Graphics. Чуть позже мы будем использовать дополнительные пространства имен System.Drawing.Drawing2D, System.Drawing.Imaging, System.Drawing.Printing, System.Drawing.Text, расширяющие функциональные возможности библиотеки System.Drawing.

Класс Graphics предоставляет методы рисования на устройстве отображения (другие термины — графический контекст, «холст»). Определимся сразу, на чем мы хотим рисовать. Далее в примерах он обозначается как объект g.

Способы задания «холста»

1. Графический объект — «холст» для рисования на форме Form1 (указатель this) можно задать, например, одним оператором:
Graphics g = this.CreateGraphics();
Примечание. Заметим, что стандартным образом
Graphics g = new Graphics();
создать объект-холст не удается.
На этом операторе генерируется ошибка:
Для типа «System.Drawing.Graphics» не определен конструктор.

2. Еще пример задания графического контекста на визуальном компоненте PictureBox (ящик для рисования) через растровый объект класса Bitmap. В классе Form1 зададим два объекта:
Graphics g; // графический объект — некий холст
Bitmap buf; // буфер для Bitmap-изображения
В конструктор Form1() добавим следующие операторы:
buf = new Bitmap(pictureBox1.Width, pictureBox1.Height); // с размерами
g = Graphics.FromImage(buf); // инициализация g

3. В принципе, иногда (если все графические операции выполняются внутри одной функции) эти четыре строки могут быть заменены одной строкой:
Graphics g = Graphics.FromImage(new Bitmap(pictureBox1.Width, pictureBox1.Height));
После этого можно задать фон холста белым:
g.Clear(Color.White);

4. Еще один пример задания «холста» на форме через дескриптор окна:
Graphics g = Graphics.FromHwnd(this.Handle);
Далее в примерах конкретизируются эти способы.

Объекты других классов из библиотеки System.Drawing

Такие классы, как Rectangle (прямоугольник) и Point (точка) инкапсулируют элементы GDI+. Отметим, что Point вообще то является структурой (struct) с полями x,y. Это уточнение несущественно, так как в C# структуры похожи на классы, a инициализация объекта-структуры point может выглядеть так же, как инициализация объекта-класса:
Point point= new Point();

Класс Pen (перо) используется для рисования линий и кривых, а классы, производные от класса Brush (кисть) используются для закраски замкнутых контуров (см. ниже).

Класс GraphicsPath позволяет задавать последовательность соединенных линий и кривых, класс Region описывает внутреннюю часть графической формы, состоящей из многоугольников и контуров.

Класс Image – абстрактный базовый класс предоставляет функциональные возможности для производных классов Bitmap и Metafile. Bitmap используется для работы с пиксельными изображениями (см. выше пример). Metafile определяет графический метафайл, содержащий записи, описывающие последовательность графических операций, которые могут быть записаны (созданы) и воспроизведены (отображается). Этот класс не наследуется.

Класс Graphics

Он инкапсулирует поверхность рисования GDI+. Этот класс не наследуется. Методов в этом классе огромное количество, поэтому сначала представим их в таблице, а затем рассмотрим некоторые из них с примерами и пояснениями.
В третьем столбце таблицы указывается число перегрузок метода, различающихся набором параметров (используйте интеллектуальную подсказку IntelliSense для выбора нужного Вам варианта метода).

Имя метода Описание Число перегрузок
Clear(Color) Очищает всю поверхность рисования и выполняет заливку поверхности указанным цветом фона. 1
CopyFromScreen(Point, Point, Size) Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics. 4
Dispose() Освобождает все ресурсы, используемые данным объектом Graphics. 1
DrawArc(Pen, Rectangle, Single, Single) Рисует дугу, которая является частью эллипса, заданного структурой Rectangle. 4
DrawBezier(Pen, Point, Point, Point, Point) Рисует кривую Безье, определяемую четырьмя структурами Point. 3
DrawBeziers(Pen, Point[]) Рисует несколько (N) кривых Безье, определяемых массивом из (3N+1) структур Point. 2
DrawCloseCurve(Pen, Point[ ]) Рисует замкнутый фундаментальный сплайн 4
DrawEllipse(Pen, Rectangle) Рисует эллипс 4
DrawIcon(Icon, Rectangle) Рисует значок 2
DrawImage(Image image, int x, int y) Рисует заданное изображение image, используя его фактический размер в месте с координатами (x,y) 30
DrawLine(Pen, Point, Point) Проводит линию, соединяющую две структуры Point. 4
DrawLines(Pen, Point[ ]) Рисует набор сегментов линий, которые соединяют массив структур Point. 2
DrawPath(Pen, gp) Рисует пером Pen объект GraphicsPath gp. 1
DrawPie(Pen, Rectangle, Single, Single) Рисует сектор, который определяется эллипсом, заданным структурой Rectangle и двумя радиалtьными линиями. 4
DrawPolygon(Pen, Point[]) Рисует многоугольник, определяемый массивом структур Point. 2
DrawRectangle(Pen, Rectangle) Рисует прямоугольник, определяемый структурой Rectangle. 3
DrawRectangles(Pen, Rectangle[]) Рисует набор прямоугольников, определяемых структурами Rectangle. 2
DrawString(String, Font, Brush, PointF) Создает указываемую текстовую строку в заданном месте с помощью определяемых объектов Brush и Font. 6
Equals(Object) Определяет, равен ли заданный объект текущему объекту. (Унаследовано от Object.) 1
ExcludeClip(Rectangle) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Rectangle. 1
ExcludeClip(Region) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Region. 1
FillClosedCurve(Brush, Point[]) Заполняет внутреннюю часть замкнутой фундаментальной кривой, определяемой массивом структур Point. 6
FillEllipse(Brush, Rectangle) Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, который задан структурой Rectangle. 4
FillPath(Brush, GraphicsPath) Заполняет внутреннюю часть объекта GraphicsPath. 1
FillPie(Brush, Rectangle, Single, Single) Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан структурой RectangleF, и двумя радиальными линиями. 3
FillPolygon(Brush, Point[]) Заполняет внутреннюю часть многоугольника, определяемого массивом точек, заданных структурами Point. 4
FillRectangle(Brush, Rectangle) Заполняет внутреннюю часть прямоугольника, определяемого структурой Rectangle. 4
FillRegion(Brush, Region) Заполняет внутреннюю часть объекта Region. 1
Flush() Вызывает принудительное выполнение всех отложенных графических операций и немедленно возвращается, не дожидаясь их окончания. 2
IntersectClip(Region) Обновляет вырезанную область данного объекта, включая в нее пересечение текущей вырезанной области и указанной структуры 3
ResetClip() Сбрасывает выделенную область g, делая ее бесконечной 1

Подробнее еще о двух классах.

Класс Pen

Класс Pen определяет объект, используемый для рисования прямых линий и кривых. Этот класс не наследуется. Конструкторы класса (тоже пример перегрузки методов):
1) Pen(Color) инициализирует новый экземпляр класса Pen с указанным цветом.
2) Pen(Color, Single) инициализирует новый экземпляр класса Pen с указанными свойствами Color и Width. (Width — устанавливает ширину пера Pen, в единицах объекта Graphics, используемого для рисования
Например:
Pen redPen = new Pen(Color.Red); // толщина пера по умолчанию 1 пиксель
или используя промежуточную переменную green
Color green = Color.Green;
Pen greenPen = new Pen(green, 4.5f);
Можно вводить новый объект без указания явного имени пера (пример создания динамического объекта — пера):
g.DrawRectangle(new Pen(Color.Red, 3), r);
например, для рисования прямоугольника r красным пером толщиной 3 пикселя, используя графический контекст («холст») g.

Класс Brush

Класс Brush определяет объекты, которые используются для заливки внутри графических фигур, таких как прямоугольники, эллипсы, круги, многоугольники и дорожки. Это абстрактный базовый класс, который не может быть реализован. Для создания объекта «кисть» используются классы, производные от Brush, такие как SolidBrush, TextureBrush и LinearGradientBrush, например:
Sol >
g.FillRectangle(br, r); // закраска прямоугольника r на «холсте» g
Или без явного объявления объекта «кисть» br:
g.FillRectangle(new SolidBrush(Color.Red), r);

Для первоначального привыкания к стилю ООП в графике рассмотрим первый пример рисования.

Как рисовать перемещенный бар в диаграмме ASP.NET

0 Veelicus [2020-11-09 13:49:00]

Я использую System.Web.UI.DataVisualization.Charting.Chart и пытается рисовать смещенные столбцы, но вместо этого: это другим способом:

Я хочу сказать, что я хотел бы нарисовать планку, начинающуюся в точке 1, и смещен на 55 пикселей справа.

со следующим кодом:

Но это не оптимальное решение, так как я должен рисовать по крайней мере 1 пиксель в той части, которую я не хочу.

Я был бы признателен за любое решение или предложение о том, как достичь моей цели. спасибо заранее.

Редактировать. Это работает на Windows Server 2012 в IIS 6.0, разработанном с использованием VS 2015 Professional в.NET 4.5 Framework

Изменение: я имею в виду 55 пикселей вправо, но лучшим решением будет следующая точка оси X

Глава 2 Основы работа с графикой в Web приложениях

Аннотация: В продолжение к сказанному в аннотации начала главы (см. «Основы работа с графикой на С# в Visual Studio 2005/2008») — данный материал является обобщением того, что по крупицам собиралось и продолжает собираться из различных источников (книги, сеть, собственные решения при выполнении конкретных задач). После проверки найденного материала, добавления недосказанного и недописанного, уточнения некоторых аспектов — материал попадает в мой справочник, некоторыми из его параграфов автор решил поделиться с Вами.

Параграф 1 Два подхода к отображению графической информации в ASP.NET

Как известно, графика в HTML отображаются через запрос в URL (src), с прямым указанием имя и расширения файла. Однако — если графический образ хранится где-то, например, в БД, или формируется динамически, то мы должны запросить адрес страницы, где формируется изображение и, далее, как-то превратить этот запрос в принятую форму вывода изображения. Тоесть, нельзя вернуть запрошенный графический объект как некую последовательность байт, а необходимо его интерпретировать или, иначе, преобразовать в картинку, а запрос трактовать как URL к графическому объекту.

Для этой цели служит класс HttpResponse, который предназначен для формирования данных ответа на запрос HTTP. Cвойство класса HttpResponse.OutputStream — позволяет сформировать вывод двоичных данных в теле исходящего содержимого ответа на НТТР запрос. Оба, рассматриваемых ниже метода, используют OutputStream класса HttpResponse и отличаются лишь тем, что в первом случае создается собственный обработчик конкретного запроса, а во втором случае используется отдельная Web страница для формирования двоичного потока данных, соответствующая графическому образу.

1.1 Отображение графической информации с использованием HttpHandler

ASP.NET обрабатывает запросы HTTP с помощью обработчика HttpHandler, который доступен по умолчанию для всех запрашиваемых страниц c расширением *.aspx и служб (*.asmx). HttpHandlers — это классы, реализующие интерфейсы IHttpHandler и IHttpAsyncHandler и, по существу, служат ISAPI фильтром, обработки http запросов. Запросы могут обрабатываться как синхронно (интерфейс System.Web.IHttpHandler) — HttpHandler возвращает управление по завершению обработки запроса или асинхронно (интерфейс System.Web.IHttpAsyncHandler) — путем запуска процессов обработки и возврата управления. Иначе — HttpHandlerы могут передавать выполнение запроса другим классам или же сами обрабатывают запрос и возвращают результат клиенту.

Важной особенностью ASP.NET является то, что HttpHandler может быть создан разработчиком для выполнения своих конкретных задач. Далее, мы рассмотрим создание своего собственного HttpHandler для отображения графической информации.

Создадим сайт с именем ws1. Пусть на основной странице Default.aspx необходимо отображать графическую информацию, которая будет создаваться некоторым классом MakeGraphiks, вызов которого будет обеспечивать обработчик HttpHandler. HTML код страницы будет примерно таким:

Перейдем к разработки непосредственно HttpHandler. Для того, чтобы любой класс мог выполнять функции HttpHandlerа, необходимо реализовать в нем интерфейс System.Web.IHttpHandler или System.Web.IHttpAsyncHandler.

Замечание: Можно также создавать экземпляр обработчика HttpHandler с помощью класса, реализующего интерфейс IHttpHandlerFactory.

Интерфейсы System.Web.IHttpAsyncHandler и System.Web.IHttpHandler должны включать методы ProcessRequest (обработчик запроса), свойства IsReusable (поддержика организация пулов). Для интерфейса System.Web.IHttpAsyncHandler требуются дополнительно методы BeginProcessRequest и EndProcessRequest(инициализация и завершение асинхронных вызовов).

Добавим к проекту класс с именем MyHandlerGraph и включим в него необходимые методы и свойства:

Если при вызове HttpHandler используются сессии, то необходимо дополнить код методом GetHandler:

HttpHandler создан. Далее необходимо подключить его к приложению. Для чего в файле Web.config в секции добавим:

Буквально это означает, что при вызове страници getgraph.aspx необходимо запрос перенаправить HttpHandlerу MyHandlerGraph. Файл getgraph.aspx в сборке приложения реально не существует, однако для вызова HttpHandler достаточно либо непосредственно задать вызов, например:

Либо воспользоваться следующим вызовам в Default.aspx.cs:

На данном этапе у нас есть зарегестрированный Handler — осталось заставить его работать по назначению.

Для начала, добавим к проекту класс (через контекстное меню) с именем MakeGraphiks.cs, который заставим формировать графическое изображение.

Осталось забрать нарисованную картинку, для чего в MyHandlerGraph добавим код обработки запроса и необходимые пространства имен. Один из способов, может быть таким:

Теперь при вызове странички Default.aspx будет отображаться графическая информация, созданная в классе MakeGraphiks.

Параграф 2 Отображение графической информации с использованием дополнительной страницы

В данном способе для формирования графического изображения требуется отдельная .ASPX страница. Страница не имеет HTML содержания, ее основная задача — извлечение параметров из URL и использование их для формирования картинки.

В данном примере показано использование класса Page для создания страницы ASP.NET фонового кода и его использования для вывода графической информации.

Добавим к проекту новую Web форму MakeGraph.aspx и оставим в ней только первую строчку HTML кода:

Как и ранее определим необходимые объекты, и код формирования изображения:

Обратим внимание, что class MakeGraph мы определили как наследника Page — класса, который представляет файл .aspx, называемый также страницей веб-форм, запрашиваемый с сервера, где выполняется веб-приложение ASP.NET.

Этот класс целесообразно наследовать, когда необходимо создать страницу веб-форм, используя метод фонового кода. (Visual Studio .NET, автоматически используют эту модель для создания страниц веб-форм, так как объект Page является именованным контейнером для всех серверных элементов управления на странице.).

Класс Page связан с файлами, имеющими расширение .aspx. Эти файлы компилируются во время выполнения как объекты Page и кэшируются в памяти сервера.

Пространства имен System.Web.UI, System.Web.UI.WebControls, System.HTML.UI.WebControls, как раз и обеспечивают возможности класса Page.

Теперь, для использования данного кода, в вызывающей странице достаточно поместить тег:

Либо воспользоваться следующим вызовам в Default.aspx.cs:

Для вывода файлов можно использовать следующий код файла MakeGraph.aspx:

Вызов остался тотже. Используя вызов с параметрами, можно выводить различные картинки.

Адаптировано к VS 2008 28.02.2008г.

Параграф 2 О возможностях преобразований графических файлов при их отображении на сайте

2.1 Как повторить примеры, приведенные ниже

Все примеры, которые приведены ниже, используют подход к отображению графической информации с использованием дополнительной страницы (описанный ранее). Скачать пустой проект Web сайта для проведения собственных экспериментов вы можете здесь.

Для использования кода в MakeGraph, в вызывающей странице (файл Default.aspx.cs) объявлена переменная
public string sTegImage = string.Empty;, а в файл Default.aspx тэг, через который происходит вызов страницы MakeGraph.aspx:

Сами вызовы формируются динамически, а для выбора файлов для отображения используется контрол FileUpload:

Таким образом, для повторения примеров создайте проект, показанный на Рис.1 (или возмите с сайта — см. выше):

Рис.1 Проект Web сайта

Естественно, что данный проект демонстрационный, и Вы не будете таскать на сервер файлы картинок с тем, чтобы потом их тащить назад и отобразить в Browser. Файлы картинок хранятся обычно на сервере или в таблицах баз данных (о том, как их оттуда достать, речь пойдет позже). На данном этапе надо сосредоточиться на том, как выдать картинки клиенту .

Рассмотрим отображение картинок. Код вызывающей страницы будет примерно таким:

Напомним, что Web Form MakeGraph состоит из файла MakeGraph.aspx с одной единственной строкой:

Код MakeGraph.aspx.cs имеет одну функцию Page_Load:

Все приводимые ниже примеры связаны с наполнением содержимым функции Page_Load класса MakeGraph.

2.2 Вывод рисунков на Web сайт

Приведенный ниже код позволяет выводить картинки на сайт, масштабировать картинки файлов форматов jpeg, bmp, png, gif, wmf, emf,tiff, ico. Анимированные файлы gif выводятся как не анимированные (о том, как вывести анимированные Gif — см. в конце этого параграфа). При использовании данного кода файлы формата tiff не загружаются на страничку в формате tiff. Правда, и обычным образом, они не могут быть выведены на html страницу (по крайней мере, в IE 7 вызов не выводит рисунок на страничку), но преобразование к png формату позволяет выполнить их просмотр (то есть, приведенный ниже код отображает и tiff файлы).

Отметим, что мы можем сохранить формат вывода таким, как в исходном файле (для этого достаточно передать тип выбранного файла в параметрах вызова MakeGraph.aspx — его можно получить через свойство FileUpload1.PostedFile.ContentType). Однако целесообразнее передавать файлы на страничку в png, gif или jpeg форматах, что значительно сокращает сетевой трафик по сравнению с другими типами файлов.

В файле Default.aspx.cs пишем:

Если использовать вывод на страничку в формате jpeg, то код можно упростить (отказавшись от MemoryStream):

Для вывода на страничку анимированных gif файлов можно воспользоваться кодом, приведенным ниже. Он отличается от предыдущего тем, что в нем исключено масштабирование, так как попытка изменить масштаб gif файла приводит к потере анимационных кадров, кроме первого.

P.S. Как ни странно, но анимация работает и при значении Response.ContentType не равному «image/gif», но ImageFormat обязательно должен быть Gif.

2.3 Возможности преобразования форматов графических файлов с использованием класса Bitmap

В предыдущем параграфе мы загружали файлы большинства известных графических форматов в класс Bitmap. Причем на странице мы их отображали уже в другом формате (Png). Это говорит о том, что класс может быть использован и для непосредственного преобразования форматов файлов.

Вместо физических путей во всех примерах, приводимых далее, можно использовать относительный путь, используя Server.MapPath()

Возможность преобразования демонстрирует следующий код (в нашем проекте его можно поместить как в файл Default.aspx.cs, так и в MakeGraph.aspx.cs):

Таблица 1 Возможности преобразований форматов c использованием класса Bitmap и метода Save

*.bmp *.jpeg *.gif *.png *.wmf/*.emf *.tiff *.ico
*.bmp + + + + +
*.jpeg + + + + +
*.gif + + + + +
*.png + + + + +
*.wmf/*.emf + + + + +
*.tiff + + + + +
*.ico + + + + +

Из таблицы видно, что можно легко конвертировать WMF, EMF или ICO к другим форматам, но не наоборот. Microsoft Windows Metafile Format (WMF) используется для хранения векторных и растровых изображений и графических данных. WMF — это базовый 16-битный формат. Формат EMF является 32-битной дополненной переработкой формата WMF. EMF расширил функциональное назначение WMF, включая цветную палитру и полную поддержку для всех 32-битовых команд GDI.

В сети можно встретить простой код, для преобразования форматов, в том числе (по утверждению авторов), подходящего для конвертации в wmf и emf:

Но, к сожалению, хотя данный код и формирует файл с расширением emf, однако содержимое файла окажется в формате png и, например, такой Viewer как Irvan View, тут же предложит Вам сменить расширение имени файла на png.

Причины этому — GDI + компоненты или, так называемые кодеки (encoders). NET имеет встроенные в кодирующие и декодирующие устройства кодеки, которые поддерживают чтение и запись bmp, gif, jpeg, png, tiff файлов и дополнительные встроенные кодеки, поддерживающие чтение файлов типа wmf, emf и ico. (О том, как программно посмотреть какие кодеки есть в системе, будем говорить в следующем параграфе).

Поэтому, для преобразования файлов в формат emf (формат wmf, скорее всего, разработчики Visual Studio посчитали устаревшим, и обошли его стороной), необходимо использовать класс Metafile. Следующий код демонстрирует пример, позволяющий преобразовать в emf формат любой из приведенных в таблице форматов:

И последнее замечание данного параграфа — для преобразования файлов всех форматов в *.ico файлы подходит следующий код (однако, не забывайте о размерах иконок):

2.4 Возможности сжатия и трансформации графических файлов, преобразованных в формат jpg

Когда мы говорим о сжатии изображений, то понимаем под этим, что речь идет, прежде всего, о формате jpg. JPEG (Joint Photographic Experts Group) создан именно как метод сжатия фотоизображений. Алгоритм JPEG является алгоритмом сжатия с потерей качества. При сохранении JPEG-файла можно указать степень сжатия, которую задают в некоторых условных единицах (в PhotoShop 1-12, в Net 1-100..). Большее число соответствует лучшему качеству, но при этом увеличивается размер файла. Когда речь идет о сжатии других форматов, то это, скорее всего, речь об удалении лишней (служебной) информации из файла (об этих аспектах сжатия мы говорить не будем). Для bmp файлов — это речь о числе бит на пиксель (2*0, 2*4, 2*8,2*24, 2*32) . Методы, применяемые для сжатия битовых матриц, связаны с изменением числа бит на пиксель (оптимизация палитры или «огрубление» цветов). Эти методы дают некоторый эффект и при работе с другими типами файлов — об этом будем говорить в следующем параграфе.

2.4.1Сжатие формата jpg

Следующий код, помещенный в MakeGraph.aspx.cs, позволяет сначала преобразовать изображение в jpg формат, а затем выполнить сжатие файла с потерей качества и вывод рисунка на web страничку.

Результат преобразования файла из формата bmp в код в формате jpg и сжатия на 25% показан на Рис.2 справа (слева исходный файл).

Рис.2 Сжатие изображения с потерей качества

2.4.2 Трансформация файла формата jpg

Код, обеспечивающий вывод трансформированных графических файлов формата jpg на сайт, практически полностью аналогичен приведенному выше и, поэтому, приводится здесь с минимальными комментариями:

2.5 О возможности сжатия графических файлов изменением числа бит на пиксель и их трансформации

Как мы отметили выше, методы, применяемые для сжатия bmp файлов, связанные с изменением числа бит на пиксель (оптимизация палитры или «огрубление» цветов), дают эффект и при работе с другими типами файлов (минимальный для jpeg и не дают эффекта для gif, emf, wmf, ico). Для jpg, gif, emf, wmf и ico файлов, при использовании приведенных ниже примеров, можно говорить только о трансформации (поворотах).

Предварительное преобразование к bmp формату так же, как и в предыдущем примере, эффективно для сжатия только bmp, png и tiff файлов.

2.6 Для тех, кто хочет работать с пикселями

Идея уменьшения изображения за счет выбрасывания каждого второго или n-го пикселя используется во многих графических редакторах при сжатии битовых матриц (и не только). В принципе, этот метод почти всегда дает неплохие результаты при малых значениях n и больших размерах картинок, и потеря качества при n=2, например, практически незаметна при размерах изображения 100*100pix. Впервые, приведенную ниже функцию вращения и сжатия изображения я написал в среде Borland C++ Builder и использовал в программе Bricks «Программы для семейного отдыха». Переведенная на C# она также может быть полезной при работе с графикой. Доступ непосредственно к байтам позволяет выполнять трансформации картинок, их сжатие с любым коэффициентом, а также может быть использована при замене части одного изображения другим и т.д. и т.п.

Приведенный ниже код справляется с вращением и масштабированием файлов всех форматов, рассматриваемых нами (единственный недостаток — время вращения больших картинок).

2.7 Использование метода DrawImage для работы с графическими файлами

Метод DrawImage класса Graphics позволяет отрисовывать изображения с их геометрическими преобразованиями. Мы его уже использовали в примерах, приведенных выше, для отрисовки изображений. Метод имеет 30 перегружаемых конструкторов и позволяет гораздо больше, нежели просто отрисовка. Некоторые из возможностей, подходящие к цели данного материала, мы и рассмотрим далее.

Прежде всего, метод позволяет отрисовывать изображения, используя некоторые атрибуты, передаваемые ему через класс ImageAttributes. Например, по матрице ColorMatrix, которая может быть включена в ImageAttributes и далее передана через ImageAttributes методу DrawImage, создается возможность менять цвета, их насыщенность, прозрачность изображения, а все возможности использования различных параметров — создавать многофункциональные графические редакторы.

Рассмотрим использование ColorMatrix. ColorMatrix это массив 5*5 чисел с плавающей запятой (Табл.2). Каждое число определяет то, каким образом будет изменена соответствующая составляющая цвета картинки (R -красный, G — зеленый, B — синий, A — альфа канал или степень прозрачности, и последний столбец — служебный), которая будет отрисовываться методом DrawImage. Там, где в матрице стоят 0 и 1 — это предопределенные числа, которые являются константами матрицы. Там, где в матрице д.б. цифра, которая не обязаны быть ни 0 ни 1, то там может быть положительное число с плавающей точкой. Цвет пикселя будет соответствовать значению соответствующей цветовой компоненты пикселя исходного изображения умноженной на значение числа в ячейке. В пятой строке матрицы числа в диапазоне [-1 +1] и определяют, на сколько должно измениться значение компонента по отношению к цветовым составляющим пикселя исходного изображения, RGBA составляющие которого считаются равными 1. Первыми вычисляются значения цвета пикселей по первым четырем строкам, а затем применяется пятая строка.

Таблица 2. Матрица ColorMatrix
Параметр R — красный G — зеленый B — синий A — альфа канал Доп столбец
Строка 1 Цифра
Строка 2 Цифра
Строка 3 Цифра
Строка 4 Цифра
Строка 5 Цифра Цифра Цифра Цифра 1

2.7.1 Трансформация и прозрачность изображений

Код, приведенный ниже, позволяет создать ColorMatrix, которая будучи включенной в качестве атрибута в ImageAttributes, позволит выполнить отрисовку изображения со степенью прозрачности 0.3. Кроме того, код демонстрирует применение метода RotateTransform при отрисовке изображений на Web сайт.

Данный код работает с bmp, png, jpeg, gif, ico файлами без дополнительных преобразований.

Рис.3 Использование метода DrawImage

2.7.2 Имитация прозрачного фона и вывод рисунков с прозрачным фоном

Используя метод DrawImage вывести на сайт рисунок с прозрачным фоном невозможно. Причина в том, что отрисовку изображения метод выполняет на собственный холст, цвет которого можно задать методом Clear.

В данном случае метод будет рисовать изображение по белому фону, а при задание цветов, которые должны быть прозрачными, они будут заменены белым. Это хорошо, когда страничка, на которую выводится изображение, белая — создается эффект прозрачности фона. А как быть в том случае, если на страничке используется background-image или, как на данной страничке, которую Вы читаете?

В таких случаях я использую поэтапный вывод, который заключается в том, что сначала картинка отрисовывается методом DrawImage на холсте с каким-нибудь редко встречающимся в рисунках цветом, а затем методами HTML передается на сайт с указанием сделать цвет холста прозрачным.

Для выполнения данных шагов и наглядности, выполним следующее:

Изменим фон странички, для чего в файле Default.aspx изменим тэг body:

В файле Default.aspx.cs изменим вывод картинки на сайт, как картинки с прозрачным цветом:

В файле MakeGraph.aspx.cs напишем нижеприведенный код:

Результат работы показан на Рис.4.

Рис. 4 Использование прозрачного фона

Литература

Дино Эспозито. Microsoft ASP.NET 2.0 Углубленное изучение. Русская редакция Питер. 2007г.

Молчанов Владислав 21.09.2005г.-14.02.2007г.

Поиск по сайту

В ASP.NET 4.0 появился новый элемент управления под названием Chart (раньше его можно было установить как отдельный компонент).

Скачать Microsoft Chart Controls for Microsoft .NET Framework 3.5 можно здесь.

Возможности элемента управления:

  • 35 различных типов диаграмм
  • Неограниченное количество районов диаграмм, заголовков, легенд и аннотаций
  • Огромное количество настроек для каждого типа диаграмм
  • 3-D версия большинства типов диаграмм
  • Подписи данных, которые можно размещать вокруг вершин
  • Линия интервалов(Strip lines), масштабирование разрывов и логарифмический масштаб
  • Более 50 финансовых и статистических формул для анализа данных и преобразований
  • Простое связывание и управление данными диаграммы
  • Поддержка распространенных типов данных, таких как: дата, время и валюта
  • Поддержка интерактивных и событийных изменений, включая обработку событий нажатия мышкой
  • Управление состоянием

Пример графиков, которые можно создавать с помощью элемента управления Chart:

Примеры использования диаграмм ASP.NET можно загрузить на странице Samples Environment for Microsoft Chart Controls.

Добавление элемента управления Chart на веб-страницу

Новый элемент управления можно найти в Toolbox в вкладке Data:

Добавляем на форму и получаем код элемента управлению по умолчанию:

При перетаскивании элемента управления на форму вверху добавится объявление сборки System.Web.DataVisualization:

Если мы запустим приложение, то увидим ошибку: «Error executing child request for ChartImg.axd». Это связано с тем, что для элемента управления не задан способ хранения временных изображений. Это делается с помощью свойства ImageStorageMode. Есть два вида способы работы — использовать http handler или использовать папку для хранения файлов.

В первом случае необходимо:

Установить свойство ImageStorageMode в UseImageLocation:

Добавить в web.config (system.web -> httpHandlers) в секцию httpHandlers новый путь ChartImg.axd таким образом:

После этого приложение не вылетит в процессе выполнения.

На данном этапе мы не увидим изображения, так как мы не задали никаких данных для отображения, но в HTML коде будет добавлено изображение:

Основные элементы Chart

Для начала работы добавим тестовые данные (Points) в контейнер Series (Points). Вы также можете добавлять несколько серий данных, которые будут отображаться на одном графике.

В качестве примера возьмем значения функции y=x^2.

Для отображения графика Chart должен содержать, как минимум, одну область для отображения — ChartArea, которая размещается внутри контейнера ChartAreas (о настройке поговорим ниже).

После этого вы увидите такой график:

Для отображения подписей к сериям данных необходимо добавить элемент Legend:

Добавим еще одну серию данных, на этот раз функции y=x^3, после чего код будет иметь такой вид:

После запуска мы увидим следующий график:

Рассмотрим детальнее, как можно управлять отображением графиков.

Создание 3D-графика

Для создания графика в 3D необходимо воспользоваться свойством area3DStyle элемента ChartArea:

area3dstyle содержит несколько интересных свойств:

  • Rotation позволяет задать поворот;
  • Perspective позволяет задать перспективу;
  • Enable3D отвечает за отображение графика в 3D;
  • IsClustered позволяет управлять кластерами данных.

В результате получим следующий график:

Типы графиков

Как уже говорилось, можно создавать графики разных видов. Указать тип графика можно с помощью свойства ChartType в элементе Series:

Установим тип нашего графика как pie (круговая диаграмма):

Результат будет следующим:

Таким образом вы можете создавать любые типы графиков очень просто.

Привязка данных

Ситуации, когда данные вводятся вручную, очень редки, чаще используются источники данных. Рассмотрим, как отобразить данные, используя источник данных.

Для этого создадим источник данных, например DataTable и напишем следующий код:

В результате мы увидим следующий график:

Как вы видите, основным моментом является необходимость установить XValuemember и YValuemember для серии, которая будет использоваться для отображения. В остальном, принципы работы с источниками данных мало отличаются от работы с другими элементами управления.

На этом пока все, надеюсь, что это небольшое руководство поможет вам научится рисовать красивые диаграммы и графики с использованием элемента управления Chart.

Рисование диаграмм на веб-сайтах ASP.NET MVC 4 (Razor, С#)

Можно ли рисовать диаграммы (кривые, гистограммы, круги) с помощью С# через ASP.NET MVC 4 (Razor). Я пытаюсь сделать некоторые графики из данных, извлеченных из моей базы данных. Но я не могу найти, как это сделать.

Любые предложения, пожалуйста?

Существует Помощник диаграммы, который отлично работает с Razor и позволяет вам легко создавать графики, гистограммы и другие графические представления ваших данных.

Или вы можете попробовать использовать некоторую библиотеку jQuery/HTML5/Javascript:

Highcharts — это графическая библиотека, написанная на чистом HTML5/JavaScript, предлагающая интуитивные интерактивные диаграммы на ваш веб-сайт или веб-приложение.

jqPlot является плагином и графическим плагином для jQuery Javascript.

Raphaël — небольшая библиотека JavaScript, которая должна упростить вашу работу с векторной графикой в ​​Интернете.

Их больше, приведенные выше — лишь некоторые примеры;

Если вы хотите отображать свои данные в графической форме, вы можете использовать хелпер Chart. Помощник диаграммы может отображать изображение, отображающее данные в разных типах диаграмм.

Вы можете создать представление с кодом бритвы для диаграммы следующим образом (скажем, его MyChart.cshtml).

Гистограмма из массива с темой

Круговая диаграмма из массива

Круговая диаграмма из массива с темой

Диаграмма с использованием DB Query

Вы можете использовать эти виды диаграмм /PartialView, где когда-либо требуется как src изображения.

Ваниль Отображает красные столбцы на белом фоне.

Синий Отображает синие столбцы на синем фоне градиента.

Зеленый Отображает синие столбцы на фоне зеленого градиента.

Желтый Отображает оранжевые столбцы на желтом фоне градиента.

Vanilla3D Отображает трехмерные красные столбцы на белом фоне.

Перечисление SeriesChartType поддерживает следующее:

  • Область
  • Bar
  • BoxPlot
  • Bubble
  • Подсвечник
  • Столбец
  • Donut
  • ErrorBar
  • FastLine
  • FastPoint
  • Воронка
  • Kagi
  • Линия
  • Pie
  • Точка
  • PointAndFigure
  • Polar
  • Пирамида
  • Radar
  • Диапазон
  • RangeBar
  • RangeColumn
  • Ренко
  • Spline
  • SplineArea
  • SplineRange
  • StackedArea
  • StackedArea100
  • StackedBar
  • StackedBar100
  • StackedColumn
  • StackedColumn100
  • StepLine
  • Фото
  • ThreeLineBreak

Это список имен, которые вы можете передать в качестве строк для хелпера диаграммы на странице Razor.

ASP.NET Веб-страница — Диаграмма Helper

Диаграмма Helper — один из многих полезных веб ASP.NET помощников.

Диаграмма Helper

В предыдущих главах вы узнали , как использовать ASP.NET «Helper» .

Вы узнали , как отображать данные в виде сетки с помощью «WebGrid Helper» .

В этой главе описывается , как отображать данные в графическом виде, используя «Chart Helper» .

«Chart Helper» может создавать диаграммы изображений различных типов с большим количеством опций форматирования и этикетками. Это может создать стандартные схемы, как площадь диаграмма, гистограммы, диаграммы колонки, линейные диаграммы и круговые диаграммы, наряду с более специализированными графиками, как биржевые диаграммы.

Данные, которые вы отобразить в диаграмме может быть из массива, из базы данных или из данных в файл.

Диаграмма из массива

Приведенный ниже пример показывает код, необходимый для отображения диаграммы из массива значений:

пример

— new Chart создает новый объект диаграммы и устанавливает его ширину и высоту

— AddTitle метод определяет заголовок диаграммы

— AddSeries метод добавляет данные в диаграмму

— chartType параметр определяет тип диаграммы

— The xValue параметр определяет имена оси х

— , yValues Параметр определяет значения по оси Y

— Write() метод отображает диаграмму

График С данными базы данных

Вы можете выполнить запрос к базе данных, а затем использовать данные из результатов, чтобы создать таблицу:

пример

— var db = Database.Open открывает базу данных (и присваивает объект базы данных переменного дб)

— var dbdata = db.Query выполняет запрос к базе данных и сохраняет результат в dbdata

— new Chart создает диаграммы новый объект и устанавливает его ширину и высоту

— AddTitle метод определяет заголовок диаграммы

— DataBindTable метод связывает источник данных к диаграмме

— Write() метод отображает диаграмму

Альтернатива использованию DataBindTable метода заключается в использовании AddSeries (см предыдущего примера). DataBindTable проще в использовании, но AddSeries является более гибким, поскольку вы можете указать график и данные более явно:

пример

График С XML-данных

Третий вариант для построения графиков является использование файла XML в качестве данных для диаграммы:

Построение графиков на основе данных из таблицы базы данных с помощью элемента управления Chart

С помощью элемента управления Chart можно легко визуализировать информацию из баз данных. Существуют два основных способа это сделать: использовать обычный ADO.NET или использовать LINQ.

В качестве примера, рассмотрим построение графика по данным из простейшей Базы данных (БД). Эта БД содержит всего одну таблицу MyTable. Её содержимое показано на рисунке ниже.

Данная БД и таблица были созданы специально для этой статьи. Поэтому, не стоит искать в них какой-либо смысл, кроме демонстрации работы с Chart. Как говорится, все совпадения случайны.

Способ с использованием ADO.NET

Для реализации подключения к БД необходимо использовать не визуальный элемент управления DataSet. После создания подключения к БД (создаётся в режиме мастера) поместим на форму не визуальный элемент управления BindingSource. Укажем в его свойстве DataSource DataSet с созданным подключением к БД, а в свойстве DataMembers таблицу с данными (MyTable).

После этого Visual Studio автоматически создаст компонент TableAdapter для получения данных из таблицы.

Теперь, когда всё подготовлено, приступим непосредственно к построению графика. Для этого сперва получим необходимые данные, затем зададим какой столбец будет осью абсцисс и ординат.

Необходимо отметить, что по умолчанию Chart уже содержит один ряд данных (имя по умолчанию Series1).

ASP.NET веб-страниц Диаграмма

Диаграмма помощник — один из многих полезных ASP.NET Web Helper.

Диаграмма Helper

В предыдущей главе вы узнали, как использовать ASP.NET в «помощника».

Как уже было описано, как использовать «WebGrid помощника» для отображения данных в сетке.

В этой главе описывается, как использовать «Диаграмма Helper» графически отображаются данные.

«Chart Helper» может создавать различные типы этикеток с различными параметрами форматирования и изображения диаграммы. Это может создать площадь диаграммы, гистограммы, диаграммы столбцов, линейные диаграммы, круговые диаграммы и другие стандарты, он может создать более профессиональный график, как биржевые диаграммы.

Данные могут быть отображены в диаграмме из массива, данных представляет собой базу данных или файл.

Создание диаграммы на основе массива

В следующем примере показан код, необходимый для диаграммы данных из массива:

примеров

— Новый график создает новый объект диаграммы и установить его ширину и высоту

— Метод AddTitle определяет заголовок диаграммы

— AddSeries способ увеличения данных на диаграмме

— Параметр ChartType определяет тип диаграммы

— Параметр NamexValue определяет ось х

— Имя параметра определяет ,Y. оси Y.

— Write () метод , чтобы отобразить диаграмму

Создание диаграммы на основе базы данных

Можно выполнить запрос к базе данных, а затем использовать результаты запроса данных для создания диаграммы:

примеров

— Var дБ = Database.Open открыть базу данных (объект базы данных присваивается переменной БД)

— Var dbdata = db.Query выполнить запрос к базе данных и сохранять результаты в dbdata

— Новый график создает новый объект диаграммы и установить его ширину и высоту

— Метод AddTitle определяет заголовок диаграммы

— DataBindTable метод для связывания источника данных в диаграмму

— Write () метод , чтобы отобразить диаграмму

В дополнение к использованию вне DataBindTable метода, другой метод заключается в использовании AddSeries (см предыдущий пример). DataBindTable проще в использовании, но AddSeries более гибкими, потому что вы можете более четко определить графики и данные:

примеров

Создание диаграмм на основе данных XML

Третий способ заключается в создании диаграммы, используя XML-файлы в качестве данных диаграммы:

Мастер Йода рекомендует:  Сделка между Facebook и Instagram, наконец-то, одобрена
Добавить комментарий