Удачные диаграммы. Часть 6 - Динамическая линейная диаграмма

Автор: Ged Mead Перевод: Виталий Готовцов [Оригинал Статьи] [Обсудить в форуме]

Скачать исходный код к статье

    Существуют некоторые весьма продвинутые возможности, которые могут быть включены в динамическую диаграмму, в зависимости от того, откуда поступают данные. В этой статье мы собираемся начать с простого демонстрационного примера. Затем перейдем к более сложному, и, наконец, рассмотрим дальнейшие улучшения, которые могут быть применены в этом типе диаграмм.     Итак, давайте установим сцену. Что мы хотим сделать здесь? Хорошо, первая линейная динамическая диаграмма, которую я собираюсь сделать, будет получать некоторые данные от пользователя и отображать значения так, как они будут выбраны на диаграмме. По мере того, как будет выбрано значение, диаграмма будет расширяться и перерисовываться, чтобы показать изменения, которые были сделаны. Когда экран будет заполнен, более ранние данные будут удалены с поля зрения по мере того, как диаграмма будет прокручиваться справа налево.     Должен быть создан быстрый и легкий демонстрационный пример, на форму нужно поместить scrollbar и использовать его изменяющиеся значения в качестве данных для диаграммы. Посмотрите на помещенный ниже образец формы.

Элементы управления формы

    Серебряно-серая поверхность – это PictureBox. Изменяющиеся значения Scrollbar представляются в виде новых значений графика. Я применяю здесь Vertical Scrollbar, но вы можете так же легко применить Horizontal Scrollbar. В любом случае логика кода будет одной и той же. Вот шаги создания формы.

1. Добавьте на форму элемент Scrollbar. Установите его свойство Minimum равным 0, а свойство Maximum равным 104. (Если вам интересно, почему я выбрал такое максимальное значение, посмотрите заметки ниже на этой странице.) Установите свойство LargeChange равным 5; оставьте свойство SmallChange равным 1. Измените название элемента на SBUserValue, чтобы отобразить его цель – ScrollBar (полоса прокрутки) для определения выбранных пользователем значений (User’s Chosen Values). 2. Добавьте PictureBox и назовите его picGraph. Установите его свойство height равным 400. Почему? Это действительно способ сохранить код размеров настолько легким, насколько это возможно. Значения пользователя будут значениями от 0 до 100, поэтому будет очень легко умножать значения на 4, чтобы автоматически отмерять их вертикально на графике на PictureBox. Реальная жизнь почти наверняка не будет такой простой, но это поможет нам сконцентрироваться на важности рисования для этой первой демонстрации. Измените название PictureBox’а на picGraph и установите цвет фона Gainsborough (или другой, который вам хочется). 3. И, наконец, добавьте элемент Label (метку) для отображения изменяющегося выбранного значения. Эта метка не играет никакой роли в создании диаграммы; я включил ее для того, чтобы вы могли проверить, что любые введенные данные правильно предоставлены на диаграмме. Назовите ее lblValue. 4. Все остальные элементы управления, показанные на скриншоте вверху, являются опциональными и не требуют никакого кода.