Серверный элемент управления Google Chart API - Использование элемента управления Chart на ASP.NET-странице
ОГЛАВЛЕНИЕ
Использование элемента управления 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.
Веселого программирования!
Scott Mitchell