Visual studio chart как добавить
Обновлено: 07.07.2024
При работе с новой версией WPF 4.0 сталкиваешься с проблемой, а именно: если раньше компонент отрисовки графиков и диаграмм Chart при работе в Blend Studio был доступен на вкладке Controls, то теперь его там по умолчанию нет .Поэтому приходится подключать этот компонент вручную.
Шаг первый. Открываем/создаем проект WPF c помощью Visual Studio 2010
После открытия проекта в VisualStudio 2010 обратите внимание на панель инструментов (которая доступна при открытой главной форме приложения). В ней расположены основные элементы пользовательского интерфейса WPF (Button, CheckBox, ComboBox и др.). Как видим – компонента Chart здесь нет (см. рис. 1).
Шаг второй. Подключаем компонент для отрисовки диаграмм/графиков Chart к панели инструментов ToolBox
Для этого в панели инструментов ToolBox щелкаем правой кнопкой мыши и вызываем контекстное меню. В контекстном меню выбираем пункт «ChooseItems…» (см. рис. 2). После этого появляется диалоговое окно выбора элементов панели инструментов, как показано ниже на рисунке 3.
Выбираем вкладку WPF Components, в списке компонентов находим элемент Chart и помечаем его галочкой. Нажимаем клавишу OK .
Компонент Chart появился в списке ToolBox (рис. 4).
Примечание: не рекомендуется убирать галочки с других элементов, т.к. в этом случае они пропадут из панели ToolBox.
Шаг третий. Добавляем компонент для отрисовки диаграмм/графиков Chart в проект WPF
Для того чтобы добавить элемент Chart в проект, необходимо его перетащить на форму, после чего сохранить проект. Обращаем внимание, что в разделе References добавилась новая ссылкаSystem.Windows.Controls.DataVisualization.Toolkit.
После того, как проект сохранен, можно открыть его в Blend Studio 4.0 для продолжения работы над интерфейсом (при этом Chart уже будет доступен на панели Controls), либо продолжить разработку в Visual Studio 2010.
БлогNot. Chart, примеры в Studio
Chart, примеры в Studio
Компонента Chart (диаграмма) в Visual Studio довольно удобна, хотя для начинающих обычно сложно выбрать из множества её возможностей самые актуальные. К тому же, задокументировано-то всё лишь на MSDN.
Приведу несколько примеров, анализ которых поможет Вам быстро освоить основные приёмы работы с графиками и диаграммами в Visual C++. Все коды проверены в сборке Express 2010.
Пример 1. Добавим на форму компоненту Chart и выведем туда данные
Пример 2. Сделаем красивый Chart программно, можно по нажатию новой кнопки на той же форме
Создаем программно красивый Chart в проекте C++ Windows Forms
Пример 3. Вытащим данные из Chart в TextBox
Пример 4. Сделаем парсер выражений на основе чужого класса - это можно применить для создания полноценного "графопостроителя"
Добавим какой-нибудь не очень сложный парсер, например, класс parser.cpp от Chaos Master.
Кинем файлы parser.cpp и parser.h в папку с кодом (Имя_проекта/Имя_проекта, где находится Form1.h ). В меню скажем Проект - Существующий элемент и добавим файл .cpp (он д.б. в "Файлы исходного кода" Обозревателя решений)
Код выбранного нами парсера старый, так что нам придётся кое-что переделывать, например, строки char * в String ^ и обратно.
Добавим на форму компоненты textBox1 и label1 , напишем демо-код для применения парсера (вызывается по нажатию кнопки):
Возможно, понадобится изменить какие-то ещё мелочи, например, я в файле parser.cpp раскомментарил строку
и изменил в коде exp(1) на exp(1.) - иначе не компилировалось в Studio.
Также ясно, что в начале файла form1.h добавлена строка
Теперь в поле ввода можно писать любые допустимые парсером выражения с переменной x , например, cos(x)+1 , текущее значение переменной x из программы подставится в выражение и его результат динамически подсчитается.
На основе показанных кодов легко сделать, например, программу построения графиков с интерпретацией введённой пользователем функции. Скажем, если выражение для функции с аргументом, обозначенным x , вводится в текстовое поле textBox1 , код построения графика функции в пределах от 0 до 3.14 с шагом, равным 0.1 , будет таким:
P.S. В более новой Studio 2019 пришлось сделать ^f1 вместо f1 и, соответственно, везде f1-> вместо f1.
Заменить фиксированные пределы и шаг на вводимые из формы - элементарно. Вот что вышло для теста:
Пример построения графика на основе парсера функций
Пример 5. Применение разрывов
На форму проекта помещена chart1 со свойством Dock = Fill , построение происходит по загрузке формы.
разрывы по оси y на графике
Как добавить прозрачность компоненту Panel?
Как к компоненту Panel добавить свойство ПРОЗРАЧНОСЬ?
Можно ли добавить пользовательское свойство стандартному визуальному компоненту?
На форме есть несколько компонентов, они будут часто изменяться(расположение, внешний вид и т.п.).
Добавить пустые точки справа от сегодняшней даты на chart
Привет всем. Такая тема. Есть chart с данными файла .csv Последняя дата - сегодня. Нужно чтобы.
Можно ли на компоненту Мемо добавить компоненту Image?
Можно ли на компоненту Мемо добавить компоненту Image. И как это делается?
Решение
да я понимаю, я тоже думал что дело в этом , но в net framework тоже почему то нету.
я попробую
Добавлено через 1 час 35 минут
наврал , есть, спасибо!
Вопрос по компоненту Chart
Размещаю 2 кнопки на компоненте Chart, с названиями "+" и "-". Возможно ли сделать так, чтобы по.
Вопросы по компоненту Chart, и не только.
Предисловие: В связи с тягой к компьютерам и наличием некоторых (небольших и поверхностных).
Как добавить сложному компоненту событие своего подкомпонента?
Свойства подкомпонента добавить удалось, а, вот, как добавить компоненту события подкомпонента-- не.
Как добавить компоненту новое свойство используя класс-перехватчик?
Всем здравствуйте. Ознакомился с содержимым статьи.
Как добавить Chart на форму?
Здравствуйте! Хочу воспользоваться элементом Chart из System.Windows.Forms.DataVisualization, но не.
Как добавить chart в форму
Создаю пустой проэкт с++ потом добавляю файлы исходного кода и выбираю там UI Windows Form, оно.
Многообразие функциональных средств и параметров этого элемента управления столь велико, что их просто невозможно осветить в одной статье. В последующих разделах будет показано, как создавать некоторые из доступных типов диаграмм, привязывать диаграммы к различным источникам данных и выполнять ряд полезных функций создания диаграмм. С более полным набором примеров можно ознакомиться в библиотеке образцов, которая содержит свыше 200 примеров различных элементов управления Chart.
Создание базовой диаграммы
Диаграмму можно добавить, перетаскивая элемент управления Chart из панели инструментов (он находится в группе Data (Данные)) на поверхность визуального конструктора или помещая дескриптор <asp:Chart> в код разметки. Объявление для этого примера диаграммы выглядит так:
Фон диаграммы - это пространство, которое окружает область диаграммы. В качестве фона диаграммы была выбрана градиентная заливка с диагональным переходом от серого цвета (Gray) до белого дыма (WhiteSmoke), что было указано с помощью свойств BackColor, BackSecondaryColor и BackGradientStyle. При визуализации диаграммы фон создается с применением выбранной цветовой схемы.
После этого в примере выше мы задаем стиль рамки. Свойство BorderlineDashStyle управляет отображением края рамки. Значение Solid из перечисления ChartDashStyle обеспечивает рисование вокруг края диаграммы линии толщиной в один пиксель цветом, заданным в свойстве BorderlineColor. в качестве которого был установлен цвет Gray. Свойство BorderSkin поддерживает множество опций, но в примере была установлена только опция SkinStyle в Emboss, что создает трехмерный эффект приподнятой рамки с тенью.
Следующий шаг - выбор цвета фона для области диаграммы и определение заголовка. Обратите внимание, что ссылка на область диаграммы выполняется по индексному значению. Это связано с тем, что диаграмма может иметь более одной области, в которой могут графически представляться данные. Решение этой задачи рассматривается далее в статье. Диаграмма имеет только одну область, и для нее выбран цвет Wheat (пшеничный).
Диаграмма может иметь более одного заголовка, поэтому новый заголовок понадобится добавить в коллекцию Titles с помощью метода Add(), а затем сослаться на нужный заголовок по индексу для его форматирования. Форматирование сводится к установке шрифта и размера. Диаграмма с выполненными на данный момент настройками показана на рисунке ниже:
Существует множество различных способов форматирования диаграммы, и выбор подходящего набора опций может требовать некоторого времени. Мы начали с задания внешнего вида диаграммы, поскольку по странной иронии процесс добавления данных проще подбора подходящей цветовой схемы. Элемент управления Chart настолько гибкий и обладает таким многообразием опций, что бремя выбора само по себе становится достаточно серьезным препятствием.
Как только основные настройки представления данных определены, можно заняться самими данными. Наборы данных представлены с использованием класса Series, и каждый создаваемый класс Series должен быть добавлен в коллекцию Chart.Series с помощью метода Add(). Обычно создание и добавление класса Series осуществляется в одном шаге, как показано в следующем фрагменте кода:
В этом коде создается новая серия ColumnSeries и за счет установки свойства ChartType в SeriesChartType.Column указывается, что данные этой последовательности должны быть представлены в виде столбчатой диаграммы. Свойство SeriesChartType принимает 35 различных значений, каждое из которых соответствует отдельной разновидности диаграммы. Если значение свойства ChartType не указано, по умолчанию для него выбирается Column (столбчатая диаграмма).
Для наборов данных можно сконфигурировать ряд свойств. Ниже приведен код, который используется для создания второй коллекции Series и содержит некоторые изменения:
Для этой диаграммы в качестве типа был выбран Spline (график в виде плавной линии). Значение BorderWidth управляет толщиной линейного графика, а установка значения для свойства ShadowOffset создает эффект наличия трехмерной тени под вычерчиваемой линией. Свойство Color определяет цвет, используемый для рисования графика. Для этого примера был выбран бросающийся в глаза оттенок PaleVioletRed.
Последний шаг состоит в добавлении данных в набор. Существует множество различных способов связывания данных с диаграммой. В этом примере применяется простейший из них - перечисление статических значений:
Каждая коллекция Series содержит коллекцию Points. Мы использовали метод DataBindY(), реализующий интерфейс IEnumerable, который позволяет для указания данных применять массив целочисленных значений. Индекс данных используется в качестве X-координаты для каждого значения Y в массиве. При загрузке страницы, содержащей элемент управления Chart, результат выглядит, как показано на первом рисунке в статье.
Конфигурирование элемента управления Chart можно полностью выполнить также с помощью разметки. Определение рассмотренной диаграммы в этой форме имеет следующий вид:
Вот и все. Если теперь взглянуть на веб-страницу, результат будет выглядеть, как показано на первом рисунке в статье.
Мы не станем подробно останавливаться на всех доступных опциях представления диаграмм, но одна из обычно встречающихся задач - генерация трехмерных диаграмм. Чтобы преобразовать нашу простую диаграмму в трехмерную, добавим следующую строку кода в метод Page_Load:
Активизация трехмерного представления производится на уровне области диаграммы (ChartArea). Если диаграмма содержит несколько областей, двухмерные и трехмерные графики можно сочетать. Элементарная диаграмма в трехмерном представлении показана на рисунке ниже. А вот изменение, которое должно быть внесено в код разметки:
Заполнение диаграммы данными
Кроме статических данных, которые использовались в предыдущем примере, элемент управления Chart может быть заполнен данными из множества различных источников. В настоящем разделе мы рассмотрим наиболее часто используемые источники данных.
Привязка к таблице базы данных
В этом примере для демонстрации привязки диаграммы к таблице базы данных используется таблица Products тестовой базы данных Northwind. Процесс начинается с форматирования элемента управления Chart, во многом подобно тому, как это делалось в предыдущем примере.
Затем нужно выполнить привязку с использованием метода DataBindTable(), который принимает ранее созданный SqlDataReader в качестве аргумента. Как уже упоминалось ранее, привязка к таблице автоматически создает по одной серии данных для каждого числового столбца данных. В данном случае запрашиваются столбцы ProductName и UnitsInStock. Элемент управления Chart проигнорирует текстовый столбец ProductName и создаст новый экземпляр Series для столбца UnitsInStock. Форматирование объекта Series невозможно до тех пор, пока он не будет создан, поэтому свойство ChartType устанавливается после того, как таблица привязана к элементу управления. И, наконец, объекты SqlDataReader и SqlCommand закрываются.
Диаграмма, созданная этим кодом, показана на рисунке ниже:
Проблема с этой диаграммой состоит в том, что столбец ProductName был проигнорирован. Во время процесса привязки элемент управления Chart работал исходя из того, что все SQL-данные должны были интерпретироваться как значения по оси Y, и отбрасывал все, что не могло использоваться подобным образом.
Если один из столбцов должен служить в качестве значений по оси X, об этом нужно явно сообщить элементу управления Chart, выполняя привязку данных с помощью метода Points.DataBindXY() класса Series. Чтобы адаптировать предыдущий пример, закомментируйте три строки начиная с Chart1.Series.Clear() и добавьте две новых строки в файл отделенного кода:
Метод DataBindXY() позволяет предоставлять источник данных и имена столбцов, которые должны применяться для осей X и Y. В рассматриваемом примере источником данных для обеих осей является SqlDataReader, а именами столбцов - ProductName и UnitsInStock. Обратите внимание, что в этот раз коллекция Series не очищается. Метод DataBindXY() применяется к уже существующей коллекции Series (а не создает новую), и в примере была использована та, которая создается по умолчанию. Открыв измененную страницу, можно увидеть результат, показанный на рисунке ниже:
Привязка к объектному источнику данных
Один из наиболее гибких механизмов заполнения диаграммы предусматривает использование ObjectDataSource, когда определяется объект, который может получать данные, а в качестве моста между логикой извлечения данных в коде и элементом управления Chart служит ObjectDataSource. Класс извлечения должен быть создан в папке App_Code. В следующем примере возвращаются простые статические данные:
В этом примере определен класс DataItem, имеющий свойства Name и Popularity. Метод GetData() генерирует и возвращает массив элементов DataItem. Эта методика привязки будет также работать с методами, которые возвращают объекты DataSet и DataTable. Гибкость использования ObjectDataSource обусловлена тем, что средства, определяющие источник данных, абстрагируются от диаграммы, что позволяет свободно изменять бизнес-логику. Для работы с данными создается новый экземпляр ObjectDataSource с передачей конструктору имени созданного класса извлечения и имени метода, который должен быть вызван для получения данных. В рассматриваемом примере ими соответственно являются MyObjectDataSource и GetData():
Читайте также: