Вступление
В этой статье мы рассмотрим общую задачу визуализации данных — создание панели мониторинга продаж. Панель мониторинга продаж широко используется в бизнес-презентациях, чтобы наметить ключевые показатели эффективности для данного бизнес-процесса или цели. Ключом к любой такой презентации является хорошая визуализация данных, а также отточенный внешний вид. Для достижения поставленной цели я использую соответствующие компоненты диаграммы, которые предлагают все необходимые функции. В этом примере используются компоненты диаграмм из ShieldUI , которые свободно доступны на их сайте.
Готовая презентация выглядит так:
Используя код
Для начала я создаю новый проект Visual Studio для веб-сайтов. Веб-приложение должно содержать один файл .aspx, в котором будут размещаться соответствующие элементы управления. Второй шаг — включить в проект файлы DLL для компонентов диаграммы:
Как только мы добавим .dll для компонента, который мы будем использовать, нам нужно сослаться на него в проекте.
Это можно сделать прямо на странице .aspx, содержащей пример панели инструментов:
<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
Затем, поскольку этот элемент управления является оберткой на стороне сервера клиентского компонента JavaScript, нам также необходимо включить ссылки на базовую диаграмму JavaScript. Это также делается в файле .aspx:
<head>
<link rel="stylesheet" type="text/css"
href="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/css/shield-chart.min.css"/>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/jquery-1.9.1.min.js"
type="text/javascript"></script>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/shield-chart.all.min.js"
type="text/javascript"></script>
</head>
Следующим этапом проекта является преобразование требований в код. Требования указывают, что нам нужно иметь две или более связанных диаграммы. В нашем случае у нас есть элемент управления для размещения кварталов, а также второй график для отображения данных, относящихся к каждому кварталу, и еще один график, относящийся ко второму. Таким образом, мы можем разделить на кварталы и линейки продуктов — общий сценарий визуализации данных для панели мониторинга продаж. Следуя приведенному выше плану, мы добавляем первый график в файл .aspx. Его объявление выглядит так:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<shield:ShieldChart ID="ShieldChart1" runat="server" AutoPostBack="true" OnSelectionChanged="ShieldChart1_SelectionChanged" Width="320px" Height="330px"
OnTakeDataSource="ShieldChart1_TakeDataSource">
<PrimaryHeader Text="Quarterly Sales">
</PrimaryHeader>
<ExportOptions AllowExportToImage="false" AllowPrint="false" />
<TooltipSettings CustomPointText="Sales Volume: <b>{point.y}</b>">
</TooltipSettings>
<Axes>
<shield:ChartAxisX CategoricalValuesField="Quarter">
</shield:ChartAxisX>
<shield:ChartAxisY>
<Title Text="Quarter Overview"></Title>
</shield:ChartAxisY>
</Axes>
<DataSeries>
<shield:ChartBarSeries DataFieldY="Sales">
<Settings EnablePointSelection="true"
EnableAnimation="true">
<DataPointText BorderWidth="">
</DataPointText>
</Settings>
</shield:ChartBarSeries>
</DataSeries>
<Legend Align="Center" BorderWidth=""></Legend>
</shield:ShieldChart>
</ContentTemplate>
</asp:UpdatePanel>
Он обернут в панель обновлений, чтобы обеспечить плавные визуальные обновления.
Чтобы заполнить элемент управления диаграммы данными, мы используем TakeDataSource обработчик событий в коде файла .aspx:
protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
ShieldChart1.DataSource = new object[]
{
new {Quarter = "Q1", Sales = 312 },
new {Quarter = "Q2", Sales = 212 },
new {Quarter = "Q3", Sales = 322 },
new {Quarter = "Q4", Sales = 128 }
};
}
DataSource Свойство элемента управления указывает диаграмму , какие данные будут переданы ему для визуализации. Здесь мы передаем простой массив объектов с продажами для каждого квартала. Это будет представлять график с квартальными данными. Вторая связанная диаграмма, также добавленная в файл .aspx, выглядит следующим образом:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
ChildrenAsTriggers="false">
<ContentTemplate>
<shield:ShieldChart ID="ShieldChart2"
OnTakeDataSource="ShieldChart2_TakeDataSource" AutoPostBack="true"
OnSelectionChanged="ShieldChart2_SelectionChanged" runat="server"
Width="463px" Height="331px">
<ExportOptions AllowExportToImage="false" AllowPrint="false" />
<PrimaryHeader Text="Select a Quarter to show products sales">
</PrimaryHeader>
<Axes>
<shield:ChartAxisY>
<Title Text="Break-Down for selected quarter"></Title>
</shield:ChartAxisY>
</Axes>
<DataSeries>
<shield:ChartDonutSeries EnableValueXSorting="false"
CollectionAlias="Q Data" DataFieldY="Data" DataFieldX="Product">
<Settings EnablePointSelection="true"
EnableAnimation="true" AddToLegend="true">
<DataPointText BorderWidth="">
</DataPointText>
</Settings>
</shield:ChartDonutSeries>
</DataSeries>
<Legend Align="Center" BorderWidth=""></Legend>
</shield:ShieldChart>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ShieldChart1"
EventName="SelectionChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
Как на первой, так и на второй диаграммах включен обработчик события выбора, чтобы можно было заново создать связанный элемент управления, поскольку к ним обем прикреплена под-диаграмма. Ход проекта позволяет конечному пользователю выбрать четверть из четырех четвертей, отображаемых в « ShieldChart1». Затем за этот квартал все доступные данные отображаются в виде кольцевой диаграммы, которая находится в » ShieldChart2«. Затем пользователь может выбрать определенную категорию из пончика, который, в свою очередь, заполняет третий график. Его декларация указана ниже:
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<shield:ShieldChart ID="ShieldChart3" runat="server"
OnTakeDataSource="ShieldChart3_TakeDataSource"
Width="905px" Height="280px">
<DataSeries>
<shield:ChartLineSeries DataFieldY="QuarterSales">
<Settings AddToLegend="false">
<DataPointText BorderWidth="">
</DataPointText>
</Settings>
</shield:ChartLineSeries>
</DataSeries>
<PrimaryHeader Text="Select a product to show sales details...">
</PrimaryHeader>
<ExportOptions AllowExportToImage="false" AllowPrint="false" />
<Legend Align="Center" BorderWidth=""></Legend>
</shield:ShieldChart>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ShieldChart2"
EventName="SelectionChanged" />
</Triggers>
</asp:UpdatePanel>
Необходимо сделать еще один дополнительный шаг, чтобы разрешить повторное создание вспомогательных диаграмм. Это делается на сервере после запуска выбора графиков. Это устраняет необходимость писать любой код на стороне клиента. Код на стороне сервера выглядит следующим образом:
protected void ShieldChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
if (e.Selected)
{
SelectedQuarter = e.Name;
DataPerformance = GetPerformanceData().Where(d => d.Quarter == SelectedQuarter).ToList();
}
else
{
DataPerformance = null;
}
ShieldChart2.DataBind();
}
protected void ShieldChart2_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
if (e.Selected)
{
SalesData = GetSalesDataProducts().Where(s => s.Quarter == SelectedQuarter && s.Product == e.Item.ValueX.ToString()).ToList();
}
else
{
SalesData = null;
}
ShieldChart3.DataBind();
}
На этом настройка завершена, и панель мониторинга продаж готова к использованию. Не стесняйтесь загрузить образец кода в верхней части статьи и изучить код для дальнейшего использования.