Extending ASP.NET: Рисуем диаграммы и графики с помощью Chart. Типы графиков

среда, 16 июня 2010, Александр Краковецкий

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

Элемент управления Chart содержит несколько типов графиков, каждый из которых имеет список уникальных требований к данным, которые необходимо отобразить, включая:

  • количество значений по оси Y
  • разрешенное количество серий
  • типы графиков, которые нельзя комбинировать
  • функции кастомизации и настройки
  • поддержка маркеров
  • поддержка 3D.

Рассмотрим типы графиков более детально.

100% Stacked Area Chart

Отображает несколько серий данных в виде stacked areas. Сумма значений всех элементов всегда равняется 100%:

Picture of the 100% 
Stacked Area chart type

Свойства:

  • 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 Украина


Сайт:
http://www.microsoft.com/ukr/ua/

Microsoft Украина Украинское подразделение компании Microsoft.

Ищите нас в интернетах!

Комментарии

Свежие вакансии