Extending ASP.NET: Рисуем диаграммы и графики с помощью Chart. Типы графиков
В предыдущей части мы говорили об элементе управления Chart в целом, сегодня же предлагаю посмотреть, какие типы графиков предлагает данный элемент управления.
Элемент управления Chart содержит несколько типов графиков, каждый из которых имеет список уникальных требований к данным, которые необходимо отобразить, включая:
- количество значений по оси Y
- разрешенное количество серий
- типы графиков, которые нельзя комбинировать
- функции кастомизации и настройки
- поддержка маркеров
- поддержка 3D.
Рассмотрим типы графиков более детально.
100% Stacked Area Chart
Отображает несколько серий данных в виде stacked areas. Сумма значений всех элементов всегда равняется 100%:
Свойства:
- SeriesChartType: SeriesChartType.StackedArea100
- необходимое количество значений Y для каждой точки: 1
- количество серий: 2 или больше
- поддержка маркеров: нет
- может быть объединен с: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: PixelPointDepth, PixelPointGapDepth
100% Stacked Bar Chart
Этот тип отображает наборы данных в виде stacked bars. Сумма пропорций элемента должна равняться 100%:
Данный тип графиков хорошо использовать для отображения серии данных типа "пропорции vs. время".
Свойства:
- SeriesChartType: SeriesChartType.StackedBar100
- необходимое количество значений Y для каждой точки: 1
- количество серий: 2 или больше
- поддержка маркеров: нет
- может быть объединен со всеми, кроме Bar и Stacked Bar
- атрибуты: BarLabelStyle, DrawingStyle, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth, StackedGroupName
100% Stacked Column Chart
Этот тип графика отображает данные в виде stacked columns. Сумма пропорций элемента должна равняться 100%:
Данный тип графиков хорошо использовать для отображения серии данных типа "пропорции vs. время". Отличие от предыдущего типа в том, что данные отображаются в виде столбиков.
Свойства:
- SeriesChartType: SeriesChartType.StackedColumn100
- необходимое количество значений Y для каждой точки: 1
- количество серий: 2 или больше
- поддержка маркеров: нет
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: DrawingStyle, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth, StackedGroupName
Area Chart
Тип Area показывает степень изменения с течением времени. Он также показывает отношение части к целому.
Свойства:
- SeriesChartType: SeriesChartType.Area
- необходимое количество значений Y для каждой точки: 1
- количество серий: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: EmptyPointValue, LabelStyle, PixelPointDepth, PixelPointGapDepth, ShowMarkerLines
Bar Chart
Тип Bar показывает различия между отдельными элементами. Категории расположены по горизонтали, в то время как значения отображаются вертикально для того, чтобы уделять больше внимания сравнению значений, не времени.
Свойства:
- SeriesChartType: SeriesChartType.Bar
- необходимое количество значений Y для каждой точки: 1
- количество: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: всеми, кроме Bar и Stacked Bar
- атрибуты: BarLabelStyle, DrawingStyle, DrawSideBySide, EmptyPointValue, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
Box Plot Chart
The Box Plot chart type consists of one or more box symbols that summarize the distribution of the data within one or more data sets. A Box Plot chart displays a vertical rectangle with whisker lines extending from both ends.
The values for a box are typically calculated values from data that is present in another series. One box symbol (DataPoint object) is associated with one data series. The data for a Box Plot series may still be populated using data binding, or by employing the Series.Points member (a DataPointCollection object).
Свойства:
- SeriesChartType: SeriesChartType.BoxPlot
- необходимое количество значений Y для каждой точки: шесть или больше (см. таблицу ниже)
- количество серий: 1
- поддержка маркеров: нет
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar
- атрибуты: BoxPlotPercentile, BoxPlotSeries, BoxPlotShowAverage, BoxPlotShowMedian, BoxPlotShowUnusualValues, BoxPlotWhiskerPercentile, DrawSideBySide, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
Box Plot использует как минимум 6 значений. Дополнительные значения могут быть показаны в виде маркеров, при этом важен порядок значений (в левой части показан индекс Y значения, в правой - собственно, значение):
- 0: Lower whisker
- 1: Upper whisker
- 2: Lower box
- 3: Upper box
- 4: Average and mean
- 5: Median
- >=6: другие точки
Линии медианы и среднего значения рисуются по умолчанию, но могут быть скрыты с помощью атрибутов BoxPlotShowMedian и BoxPlotShowAverage. Ниже показан пример кода, который прячет эти линии:
Chart1.Series["Series1"]["BoxPlotShowMedian"]="false";
Chart1.Series["Series1"]["BoxPlotShowAverage"]="false";
Bubble Chart
Bubble - разновидность Point Chart, где точки показываются в виде пузырьков различных размеров. Второе значение Y отвечает как раз таки за размер пузырька. Также вместо пузырьков можно отобразить точки в виде square или diamond. Это делается с помощью свойства Series.MarkerStyle.
Свойства:
- SeriesChartType: SeriesChartType.Bubble
- необходимое количество значений Y для каждой точки: 2 (второе значение отвечает за резмер пузырька)
- количество серий: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: BubbleMaxSize, BubbleMinSize, BubbleScaleMax, BubbleScaleMin, BubbleUseSizeForLabel, EmptyPointValue, LabelStyle, PixelPointDepth, PixelPointGapDepth
Candlestick Chart
Candlestick (свечи) используются для отображения биржевых данных (значения high, low, open и close). Размер линий определяется на основании верхнего и нижнего значений, в то время как размер самих свечей определяется значениями открытия и закрытия. Последние отображаются с помощью разных цветов и зависит от того, поднялась или опустилась цена.
Свойства:
- SeriesChartType: SeriesChartType.Candlestick
- необходимое количество значений Y для каждой точки: 4 (high, low, open и close).
- количество серий: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: LabelValueType, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth, PriceDownColor, PriceUpColor
Если цена закрытия больше чем открытия, то используется цвет, заданный атрибутом PriceUpColor, в противном случае цвет берется из атрибута PriceDownColor. Значения для этих атрибутов необходимо обязательно установить, так как они не заданы по умолчанию.
Column Chart
Тип Column используется для сравнения значений по категориям.
Свойства:
- SeriesChartType: SeriesChartType.Column
- необходимое количество значений Y для каждой точки: 1
- количество серий: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: DrawingStyle, DrawSideBySide, EmptyPointValue, LabelStyle, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
Doughnut Chart
Кольцевая диаграмма похожа на тип Pie кроме того, что она имеет отверстие в центре.
Свойства:
- SeriesChartType: SeriesChartType.Doughnut
- необходимое количество значений Y для каждой точки: 1
- количество серий: 1
- поддержка маркеров: нет
- не может быть комбинирован с любым другим типом
- атрибуты: 3DLabelLineSize, CollectedColor, CollectedLabel, CollectedLegendText, CollectedSliceExploded, CollectedThreshold, CollectedThresholdUsePercent, CollectedToolTip, DoughnutRadius, Exploded, LabelsHorizontalLineSize, LabelsRadialLineSize, MinimumRelativePieSize, PieDrawingStyle, PieLabelStyle, PieLineColor, PieStartAngle
Error Bar Chart
Тип Error Bar состоит из линий и маркеров, которые используются для отображения статистической информации о данных, которые отображаются на экране. Серии Error Bar имеют три значения Y. Несмотря на то, что эти данные можно вбить вручную, чаще их рассчитывают на основании других серий данных. Также важен порядок Y-значений.
Свойства:
- SeriesChartType: SeriesChartType.ErrorBar
- необходимое количество значений Y для каждой точки: 3 (смотрите ниже)
- количество серий: 1
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar
- атрибуты: DrawSideBySide, ErrorBarCenterMarkerStyle, ErrorBarSeries, ErrorBarStyle, ErrorBarType, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
Y-значения:
- 0: среднее значение
- 1: нижнее значение ошибки
- 2: верхнее значение ошибки
FastLine Chart
Тип FastLine используется для отображения большого набора данных, когда скорость отрисовки важна. Является разновидностью линейного (Line) типа. Для увеличения скорости отрисовки тени, маркеры и подписи к данным не отображаются.
Свойства:
- SeriesChartType: SeriesChartType.FastLine
- необходимое количество значений Y для каждой точки: 1
- количество серий: 1 или больше
- поддержка маркеров: нет
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: PixelPointDepth, PixelPointGapDepth
Это не все типы графиков, о других типах поговорим в следующий раз.
Компании из статьи
Microsoft Украина | Украинское подразделение компании Microsoft. |