Серверный элемент управления Google Chart API

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Страница 1 из 2
В одной из предыдущих статей мы рассмотрели способ использования бесплатного 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. Данная статья подразумевает, что вы уже знакомы с 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. Все, что нам необходимо сделать, так это настроить несколько параметров и указать информацию, которую нужно вывести.

форум c# asp net