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
Этот тип отображает наборы данных в виде stacked bars. Сумма пропорций элемента должна равняться 100%:
Данный тип графиков хорошо использовать для отображения серии данных типа "пропорции vs. время".
- SeriesChartType: SeriesChartType.StackedBar100
- необходимое количество значений Y для каждой точки: 1
- количество серий: 2 или больше
- поддержка маркеров: нет
- может быть объединен со всеми, кроме Bar и Stacked Bar
- атрибуты: BarLabelStyle, DrawingStyle, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth, StackedGroupName
Этот тип графика отображает данные в виде 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 показывает степень изменения с течением времени. Он также показывает отношение части к целому.
- SeriesChartType: SeriesChartType.Area
- необходимое количество значений Y для каждой точки: 1
- количество серий: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar, Stacked Bar, Polar, Radar, Pyramid, Funnel
- атрибуты: EmptyPointValue, LabelStyle, PixelPointDepth, PixelPointGapDepth, ShowMarkerLines
Тип Bar показывает различия между отдельными элементами. Категории расположены по горизонтали, в то время как значения отображаются вертикально для того, чтобы уделять больше внимания сравнению значений, не времени.
- SeriesChartType: SeriesChartType.Bar
- необходимое количество значений Y для каждой точки: 1
- количество: 1 или больше
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: всеми, кроме Bar и Stacked Bar
- атрибуты: BarLabelStyle, DrawingStyle, DrawSideBySide, EmptyPointValue, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
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. Ниже показан пример кода, который прячет эти линии:
Bubble ChartBubble - разновидность 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 (свечи) используются для отображения биржевых данных (значения 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
Кольцевая диаграмма похожа на тип 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 состоит из линий и маркеров, которые используются для отображения статистической информации о данных, которые отображаются на экране. Серии Error Bar имеют три значения Y. Несмотря на то, что эти данные можно вбить вручную, чаще их рассчитывают на основании других серий данных. Также важен порядок Y-значений.
- SeriesChartType: SeriesChartType.ErrorBar
- необходимое количество значений Y для каждой точки: 3 (смотрите ниже)
- количество серий: 1
- поддержка маркеров: есть
- не может быть комбинирован с такими типами: Doughnut, Pie, Bar
- атрибуты: DrawSideBySide, ErrorBarCenterMarkerStyle, ErrorBarSeries, ErrorBarStyle, ErrorBarType, MaxPixelPointWidth, MinPixelPointWidth, PixelPointDepth, PixelPointGapDepth, PixelPointWidth, PointWidth
- 0: среднее значение
- 1: нижнее значение ошибки
- 2: верхнее значение ошибки
Тип FastLine используется для отображения большого набора данных, когда скорость отрисовки важна. Является разновидностью линейного (Line) типа. Для увеличения скорости отрисовки тени, маркеры и подписи к данным не отображаются.