Привязка к объектному источнику данных

Один из наиболее гибких механизмов заполнения диаграммы предусматривает использование ObjectDataSource, когда определяется объект, который может получать данные, а в качестве моста между логикой извлечения данных в коде и элементом управления Chart служит ObjectDataSource. Класс извлечения должен быть создан в папке App_Code. В следующем примере возвращаются простые статические данные:

public class MyObjectDataSource

{

public class DataItem

{

public string Name { get; set; }

public double Popularity { get; set; }

}

public DataItem[] GetData()

{

return new DataItem[] {

new DataItem() {Name = "Ватрушка", Popularity = 30},

new DataItem() {Name = "Мороженное", Popularity = 30},

new DataItem() {Name = "Орешки", Popularity = 20},

new DataItem() {Name = "Шоколадка", Popularity = 20}

};

}

}

В этом примере определен класс DataItem, имеющий свойства Name и Popularity. Метод GetData() генерирует и возвращает массив элементов DataItem. Эта методика привязки будет также работать с методами, которые возвращают объекты DataSet и DataTable. Гибкость использования ObjectDataSource обусловлена тем, что средства, определяющие источник данных, абстрагируются от диаграммы, что позволяет свободно изменять бизнес-логику. Для работы с данными создается новый экземпляр ObjectDataSource с передачей конструктору имени созданного класса извлечения и имени метода, который должен быть вызван для получения данных. В рассматриваемом примере ими соответственно являются MyObjectDataSource и GetData():

protected void Page_Load(object sender, EventArgs e)

{

// Форматировать диаграмму

Chart1.BackColor = Color.Gray;

Chart1.BackSecondaryColor = Color.WhiteSmoke;

Chart1.BackGradientStyle = GradientStyle.DiagonalRight;

Chart1.BorderlineDashStyle = ChartDashStyle.Solid;

Chart1.BorderlineColor = Color.Gray;

Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

// Форматировать область диаграммы

Chart1.ChartAreas[0].BackColor = Color.Wheat;

// Добавить и форматировать заголовок

Chart1.Titles.Add("ASP.NET Chart");

Chart1.Titles[0].Font = new Font("Utopia", 16);

Chart1.Series.Add(new Series("Default")

{

ChartType = SeriesChartType.Pie

});

// Создать объектный источник данных

ObjectDataSource ds = new ObjectDataSource("MyObjectDataSource", "GetData");

// Привязать источник к диаграмме

Chart1.DataSource = ds;

Chart1.Series[0].XValueMember = "Name";

Chart1.Series[0].YValueMembers = "Popularity";

}

После создания ObjectDataSource привязывается к элементу управления через свойство Chart.DataSource. На этот момент источник данных действует в качестве моста между классом извлечения и диаграммой, но диаграмма не знает, что делать с данными, которые доступны. Эта информация предоставляется с использованием свойств Series. XValueMember и Series. YValueMember, которые позволяют определять, какие члены объекта ObjectDataSource должны применяться для осей X и Y. Диаграмма, созданная этим методом, показана на рисунке ниже:

Первое приложение с применением Microsoft Chart Control

30 Март 2012 Taras Написать комментарий К комментариям

В предыдущей статье я дал общие понятия о функциональности и назначении библиотеки MS Chart Control. В этой статье, как и обещал, приступим к практическим занятиям и построим свой первый график.

Для построения графика сперва установите Microsoft Visual C# 2010 Express (бесплатная версия) вместе с платформой NET Framework 4.0 – по умолчанию содержит библиотеку MS Chart Control. Скачать среду разработки вместе с платформой можно с официального сайта здесь.

Надеюсь, дорогой читатель знаком с азами работы в среде VS, поэтому не буду расписывать элементарные вещи, нежели вопросы все – же возникнут, задавайте их в комментариях, я постараюсь ответить. После установки, запускаем VS C#, создаем новое приложение Windows Forms. Находим на «Панели элементов» вкладку «Данные», в ее списке имеется элемент управления графиками Chart, перетаскиваем его на нашу форму.

На компоненте Chart, нажимаем правой кнопкой мыши и выбираем из выпадающего контекстного меню пункт «Перейти к коду», перед вами появится исходный код приложения, который мы будем усовершенствовать, с целью построения линейного графика MS Chart Control.

Для подключения библиотеки классов MS Chart Control к нашему приложению, также необходимо добавить следующую директиву:

using System.Windows.Forms.DataVisualization.Charting;

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

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; namespace WindowsFormsApplication1 { public partial class Form1: Form { public Form1() { InitializeComponent(); /*Метод AddXY - позволяет добавить точку с двумя заданными координатами Метод Add - принимает одно значение, которое считается равным обеим коорд. Метод AddY - также принимает одну координату Y, а коорд X - автоматически получает значение равное шагу сетки графика*/ chart1.Series["Series1"].Points.AddXY(1, 3); chart1.Series["Series1"].Points.AddXY(2, 5); chart1.Series["Series1"].Points.AddXY(3, 7); chart1.Series["Series1"].Points.AddXY(4, 9); chart1.Series["Series1"].Points.AddXY(5, 11); chart1.Series["Series1"].Points.AddXY(6, 11); chart1.Series["Series1"].Points.AddXY(7.5, 9); //Настраиваем отображение кривой //Устанавливаем тип кривой Spline - округленная линия Line - грубая линия //и т.д. chart1.Series["Series1"].ChartType = SeriesChartType.Spline; //Устанавливает метки точек - цифры которые мы видим на графике //в местах перелома кривой chart1.Series["Series1"].IsValueShownAsLabel = true; } } }

При условии правильного набора кода по нажатию клавиши F5, программа должна запуститься и построить график, как на рисунке ниже.

MS Chart Control + Arduino

Кое-кто из вас наверное заметил отличие вашего графика от моего. Если нет, то присмотритесь внимательно, линии сетки моего графика имеют светло серый цвет, в то время, как у вас они черного. В коде я нигде не настраивал сетку, возникает вопрос, — каким образом?

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

Выбор типа линии MS Chart Control

На рисунке красными прямоугольниками выделены области на которые стоит обратить внимание. Этот пример — рисунок демонстрирует, как в несколько щелчков мыши можно поменять тип линии, что соответствует вот этой строчке кода

chart1.Series["Series1"].ChartType = SeriesChartType.Spline;