В одной из предыдущих статей мы рассмотрели способ использования бесплатного Chart API от Google для создания диаграмм различных типов из страницы ASP.NET. Google Chart API можно вызвать при помощи ссылки на ресурс (URL), которая содержит тип диаграммы, ее размер, данные и другие параметры в строке запроса, при этом возвращает диаграмму в виде изображения. Отображение диаграммы при помощи данного API также просто, как добавление элемента управления Image на страницу, установив при этом его свойство ImageUrl в ссылку (URL) Google Chart API с соответственно настроенной строкой запроса.
В прошлой статье мы исследовали основные параметры строки запроса и предоставили пример того, как программно создать строку запроса, чтобы получить данные из запроса к базе данных. Вкратце для создания данной строки запроса потребовалось 50 строк кода для получения информации, выразить данные в процентном соотношении друг к другу и создать все другие параметры. Гораздо легче просто перетащить элемент управления Google Chart API на страницу, настроить несколько параметров и затем привязать его к элементу управления источником данных (SqlDataSource или ObjectDataSource). В таком случае мы можем создавать диаграммы при помощи Google Chart API, не написав и строки кода.
Я создал такой элемент управления, хотя он не предоставляет все функциональные возможности Google Chart API - он только позволяет создать линейную, столбчатую и секторную диаграммы, используя при этом один набор данных, но позволяет с легкостью создать и отобразить диаграммы, управляемые данными. Данная статья демонстрирует способ использования бесплатного специализированного серверного элемента управления и освещает некоторые наиболее интересные аспекты. Вы можете загрузить скомпилированный серверный элемент управления, а также его исходный код и пример приложения, приведенные в конце статьи. Читайте далее, чтобы узнать больше об этом!
| Перво наперво : прочитайте статью о создании диаграмм при помощи Google Chart API |
|---|
| До того, как вы продолжите чтение данной статьи, я рекоммендую вам прочитать статью о . Данная статья подразумевает, что вы уже знакомы с Google Chart API, как форматируется информация диаграммы и некоторые соответствующие параметры строки запроса, используемые в создании диаграммы. |
Обзор элемента управления Chart в библиотеке skmControls2
Должен существовать более легкий способ создания простой диаграммы чем тот, который мы упомянули в прошлой статье (где рассматривалось создание диаграммы на основе информации, полученной из базы данных, при помощи 50 с лишним строк кода и Google Chart API). В идеале, разработчик должен иметь возможность перетащить элемент управления диаграммой из Toolbox на ASP.NET-страницу, установить несколько свойств для указания таких характеристик, как тип диаграммы, размер, цвет, и затем указать данные отображаемые на диаграмме несколькими возможными путями:
- Путем привязывания диаграммы к элементу управления источником данных такому, как SqlDataSource или ObjectDataSource,
- Указав жестко заданные данные диаграммы статичесим способом в разметке страницы
- Или же указав сами данные диаграммы программным способом
Некоторые встроенные веб-элементы управления ASP.NET реализуют это. К примеру, элемент DropDownList имеет множество свойств, которые могут быть использованы для того, чтобы указать его внешний вид, а данные, отображенные в элементе DropDownList могут быть указаны статически, программно или при помощи элемента управления источником данных. Я хотел создать похожий элемент управления, но вместо создания выпадающего списка элемент должен в результате вывести элемент <img> , у которого атрибут src установлен в соответствующую ссылку (URL) , чтобы создать диаграмму по полученной информации.
Я создал специализированный серверный элемент управления с названием Chart, который является частью библиотеки skmControls2 - набора специализированных серверных элементов управления для ASP.NET версии 2.0 и выше. Другие элементы управления в библиотеке skmControls2 включают в себя усовершенствованный элемент управления GridView, привязанный к данным элемент управления Label и элемент управления подсчета слов и символов в TextBox. Вы можете загрузить последнюю версию библиотеки skmControls2, а также пример , приведенный приложения в конце данной статьи.
Элемент управления Chart используется следующим образом: разработчик страницы добавляет элемент управления Chart на ASP.NET-страницу, а затем он может настроить свойства, связанные с внешним видом, к примеру ChartType (тип диаграммы), Height (высота), Width (ширина), LineColor (цвет линии), ChartTitle (заголовок диаграммы) и другие. Далее, разработчик должен указать данные для диаграммы в качестве серии точек графика. Каждая из них содержит два параметра:
- Value - значение точки данных
- Label - текстовый ярлык, связанный с точкой данных
Данная серия точек хранится в наборе Items элемента Chart. Значения в наборе Items могут быть выражены в трех видах:
- Статически - вы можете указать точки данных при помощи декларативной разметки элемента Chart. К примеру, чтобы создать диаграмму с точками данных, названными Q1, Q2, Q3 , Q4 и со значениями 45, 21, 88, 34 соответственно, вы должны использовать следующую декларативную разметку:
<cc1:Chart ID="StaticChart" runat="server">
<cc1:DataPoint Value="45" Label="Q1"></cc1:DataPoint>
<cc1:DataPoint Value="21" Label="Q2"></cc1:DataPoint>
<cc1:DataPoint Value="88" Label="Q3"></cc1:DataPoint>
<cc1:DataPoint Value="34" Label="Q4"></cc1:DataPoint>
</cc1:Chart> - Программно - набор Items является набором элементов типа DataPoint. Вы можете программно создать данные объекты и добавить их к Items. Вот блок кода, который добавляет четыре точки данных, указанных выше, но делает это программно, а не статическим способом.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
DynamicChart.Items.Add(New DataPoint("45", "Q1"))
DynamicChart.Items.Add(New DataPoint("21", "Q2"))
DynamicChart.Items.Add(New DataPoint("88", "Q3"))
DynamicChart.Items.Add(New DataPoint("34", "Q4"))
End If
End Sub - При помощи привязки данных (Data Binding) - вы можете привязать элемент управления Chart к элементу управления источником данных и Chart будет обрабатывать каждую запись, возвращенную элементом управления источником данных как точку данных. Чтобы использовать данную технику вы должны оповестить элемент управления Chart о том, какая колонка в элементе управления источником данных содержит значение точки данных, а в качестве опции вы можете указать какая колонка содержит ярлыки. Используйте свойства DataValueField и DataLabelField чтобы предоставить такую информацию.
Серверные элементы управления ASP.NET, выходные данные которых зависят от данных и чьи данные могут быть указаны при помощи при помощи элемента управления источником данных, называются элементами управления, привязанными к данным . Все такие классы наследуют класс BaseDataBoundControl, который определяет основную функциональность данных элементов. Другой класс в .NET Framework, DataBoundControl, расширяет класс BaseDataBoundControl, реализуя некоторую основную логику привязки данных и добавляя свойство DataMember. Следовательно, элемент управления Chart расширяет класс DataBoundControl (данная статья не рассматривает способ создания серверных элементов управления, привязанных к данным.)
Класс DataBoundControl включает в себя метод PerformDataBinding , который выполняется в случае, когда элемент управления привязывается к элементу управления источником данных и данная информация при этом необходима. Методу PerformDataBinding передается объект, реализующий IEnumerable, что является данными, возвращенными методом Select() элемента управления источником данных. Специализированные элементы управления, которые расширяют DataBoundControl обычно перегружают данный метод для того, чтобы предоставить логику обработки нижележащих данных. Элемент управления Chart перегружает данный метод и использует его для заполнения набора Items, как продемонстрировано в следующем блоке кода:
protected override void PerformDataBinding(System.Collections.IEnumerable data)
{
... Некоторый код был вырезан для краткости...foreach (object point in data)
{
DataPoint item = new DataPoint();if (this.DataLabelField.Length > 0 // this.DataValueField.Length > 0)
{
if (this.DataLabelField.Length > 0)
item.Label = DataBinder.GetPropertyValue(point, this.DataLabelField, this.DataLabelFormatString);
if (this.DataValueField.Length > 0)
item.Value = DataBinder.GetPropertyValue(point, this.DataValueField).ToString();
}
else
{
item.Value = point.ToString();
}this.Items.Add(item);
}
}
Все что обрабатывает элемент управления Chart , он обрабатывает в качестве элемента <img> , при этом его атрибуту src назначается соответствующая ссылка (URL) , чтобы обработать диаграмму при помощи Google Chart API. Конкретный HTML-элемент, который обрабатывается веб-элементом управления, зависит от значения его свойства TagKey. Поскольку нам необходимо, чтобы элемент Chart обрабатывался в качестве <img> (в отличие от <span> или <input>) свойство TagKey перегружается и возвращает соответствующий тип элемента:
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Img;
}
}
Когда элемент управления обрабатывается, вызывается его метод AddAttributesToRender, который отвечает за добавление любых атрибутов в пределах HTML-элемента. Элемент управления Chart перегружает данный метод, тем самым он может преобразовать данные в наборе Items (и различные настройки свойств, относящихся к внешнему виду) в соответствующую ссылку (URL) для атрибута src.
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);writer.AddAttribute(HtmlTextWriterAttribute.Src, CreateChartUrl());
... Some Code Omitted for Brevity ...
}
Как вы можете заметить, в указанном выше блоке атрибут src установлен в значении, возвращенном методом CreateChartUrl. Данный метод, продемонстрированный ниже, составляет полную ссылку к Google Chart API и строку запроса, основанную на свойствах элемента управления и на данных в наборе Items.
protected virtual string CreateChartUrl()
{
StringBuilder sb = new StringBuilder(500);
// Добавление основно (Url)
sb.Append(UrlBase);// Добавление типа диаграммы
sb.Append("cht=").Append(GetChartTypeCode(this.ChartType));// Указание ширины и высоты диаграммы
sb.AppendFormat("&chs={0}x{1}", chartWidth.Value, chartHeight.Value);// Добавление заголовка, если имеется
if (!string.IsNullOrEmpty(this.ChartTitle))
sb.Append("&chtt=").Append(HttpUtility.UrlEncode(this.ChartTitle));... Some Code Omitted for Brevity ...
// Указание данных
sb.Append("&chd=t:").Append(this.Items.RenderRelativeCHDValues(2));return sb.ToString();
}
Метод CreateChartUrl начинается с создания нового объекта StringBuilder и добавляет значение свойства UrlBase (часть ссылки Google Chart API без значений строки запроса, http://chart.apis.google.com/chart?). Он затем добавляет параметр типа диаграммы (cht), размеры диаграммы (chs) и т.д. Значения для данных параметров получаются из значений свойств элемента управления. Назначение значений нескольким другим параметрам строки запроса были опущены в вышеуказанном блоке для краткости. Самым важным шагом является указание данных диаграммы (chd). Набор Items имеет метод, названный RenderRelativeCHDValues , который возвращает значения в набор в таком формате, который требуется параметром chd строки запроса. Как уже обсуждалось в статье про создание диаграмм при помощи Google Chart API , значения для параметра chd (при указании их используя текстовое форматирование), должны быть разделены запятой и от 0 до 100 , где максимальное значение точки данных становится 100 и все остальные точки данных выражены в процентном соотношении к самому большому значению. Это расчеты обрабатываются в пределах метода RenderRelativeCHDValues.
Конечным результатом будет то, что элемент управления Chart обрабатывает элемент <img> с соответствующим атрибутом src , но вместо того, чтобы создавать самим атрибут src , за нас это выполняет элемент управления Chart. Все, что нам необходимо сделать, так это настроить несколько параметров и указать информацию, которую нужно вывести.
Использование элемента управления Chart на ASP.NET-странице
Приложение, доступное в конце этой статьи, включает в себя полный исходный код элемента управления Chart, а также пример веб-сайта ASP.NET. Чтобы использовать элементы управления skmControls2 в веб-сайте ASP.NET скопируйте DLL в директорию Bin веб-сайта, а затем добавьте следующую директиву @Register в самом начале тех страниц .aspx, в которых вы хотите использовать элемент:
<%@ Register Assembly="skmControls2" Namespace="skmControls2.GoogleChart" TagPrefix="cc1" %>
(В качестве альтернативы вы можете добавить данную директиву в файл Web.config , потому как вам не нужно будет добавлять ее в каждую ASP.NET-страницу, которая использует данные элементы управления.)
Далее добавьте следующую разметку в страницу:
<cc1:Chart ID="MyChart" runat="server" />
Вы можете теперь перейти в режим Design и увидеть эти свойства, связать их с элементом управления источником данных и т.д.
(Вы также можете добавить элемент управления в ваш инструментарий (Toolbox) в Visual Studio следующим образом: щелкните правой кнопкой мыши по Toolbox, выберите пункт Choose Items, перейдите в закладку Browse , выбрав сборку skmControls2.dll. Как только вы добавите в Toolbox , вы можете добавлять элемент управления Chart на страницу просто перетащив его из инструментария на поверхность разработки страницы или ее декларативную разметку.)
Приложение в конце статьи также включает в себя три примера элемента управления Chart. Два из них (GoogleChartDemo.aspx и GoogleChartDemo2.aspx) используют элементы управления AccessDataSource для отображения данных по категориям продаж из базы данных Northwind. Следующий рисунок демонстрирует GoogleChartDemo2.aspx. На странице два элемента управления TextBox , в которых пользователь может отфильтровать по дате. После ввода дат и нажатия кнопки "Refresh Data" (Обновить данные) страница отобразит результаты в элементе управления GridView а также в Chart. Данная функциональность возможна без единой строки кода!
Обратите внимание на то, что в линейной диаграмме названия категорий немного накладываются друг на друга. Это можно исправить, изменив ширину диаграммы или форматируя названия категорий таким образом, чтобы они состояли из трех букв. GoogleChartDemo.aspx демонстрирует способ программного форматирования данных диаграммы в таком стиле.
Третий пример (GoogleChartDemo3.aspx) содержит диаграмму, данные которой составлены программным способом. В частности, данный третий пример перечисляет файлы из корневой директории веб-приложения и суммирует общий вес файлов для каждого из уникальных расширений. Эти данные затем отображаются в сегментной диаграмме. Как вы можете заметить в следующей диаграмме, существуют четыре расширения файлов - .aspx, .vb, .config и .png , где файлы .aspx занимают больше пространства на диске, чем другие типы файлов вместе взятые.
Вывод
Google Chart API представляет простой бесплатный и легкий способ создания диаграмм - просто создайте соответственно форматированную ссылку (URL), вложите ее в атрибут src элемента <img> -- и все готово! У вас теперь есть диаграмма на вашей веб-странице. К сожалению, вам предстоит немного поработать над построением строки запроса. Вместо того, чтобы запоминать все разнородные параметры строки запроса или работать над написанием кода для создания данного запроса, гораздо легче будет использовать специализированный серверный элемент управления, который сделает это все за нас. Элемент управления Chart в библиотеке skmControls2 как раз и является таким элементом управления и, как мы увидели в данной статье, может быть применен для создания простых диаграмм, используя Google Chart API.
Веселого программирования!