Создание диаграмм

@FaceHoof · Регистрация: 21.04.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Пытаюсь создать диаграмму, но упёрся в незнание математики. Погуглил, почитал и смог изобразить вот это:
Список значений:

C#
1
2
3
lstParameters.Add(500);
lstParameters.Add(250);
lstParameters.Add(250);

Само построение:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
float fHorizontal = ClientSize.Width - Padding.Left - Padding.Right;
                float fVertical = ClientSize.Height - Padding.Top - Padding.Bottom - 10;
                Graphics g = e.Graphics;
 
                g.TranslateTransform(Padding.Left, Padding.Top);
 
                //Вычисляем сумму всех параметров
                int iSumParameter = 0;
                for (int i = 0; i < lstData.Count; i++)
                    iSumParameter += lstData[i];
 
 
                float fMaxRight= 0;
                float fMaxBottom = 0;
 
                if (fHorizontal >= fVertical)   //Для корректного изменения размера окружности относительно размеров контрола
                {
                    fMaxRight = fVertical;
                    fMaxBottom = fVertical;
                }
                else
                {
                    fMaxRight = fHorizontal;
                    fMaxBottom = fHorizontal;
                }
 
                float fRadius = fMaxRight/2 - fMaxRight;    //Радиус окружности
 
                g.DrawEllipse(Pens.Black, 0, 0, fMaxRight, fMaxBottom);
 
 
                for (int i = 0; i < lstData.Count; i++)
                {
                    float fPercent = lstData[i] / (float)iSumParameter;         //Узнаём сколько процентов составляет конкретный параметр от общей суммы
 
                    float fLineX = (float)(fRadius * Math.Cos(360 * fPercent)); //Узнаём координаты конца линии
                    float fLineY = (float)(fRadius * Math.Sin(360 * fPercent));
                    g.DrawLine(Pens.Red, fMaxRight / 2, fMaxBottom / 2, fLineX, fLineY); //fMaxRight / 2, fMaxBottom / 2 - координаты центра окружности
                }

Работает не корректно. Точка конца линии не верна, да и сам угол, наверное, тоже. Подскажите как правильно.

@Storm23 · 29.02.2016, 14:37

FaceHoof,
Круговая диаграмма:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
 
namespace WindowsFormsApplication333
{
    public partial class Form1 : Form
    {
        private List<int> lstParameters = new List<int>();
 
        public Form1()
        {
            InitializeComponent();
 
            lstParameters.Add(500);
            lstParameters.Add(250);
            lstParameters.Add(250);
            lstParameters.Add(250);
 
            new ChartPanel { Parent = this, Dock = DockStyle.Fill, Data = lstParameters };
 
        }
    }
 
    public class ChartPanel : Control
    {
        public List<int> Data { get; set; }
 
        public ChartPanel()
        {
            SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true);
 
            Padding = new Padding(20);
        }
 
        protected override void OnPaint(PaintEventArgs e)
        {
            if (Data == null) return;
 
            var w = ClientSize.Width - Padding.Left - Padding.Right;
            var h = ClientSize.Height - Padding.Top - Padding.Bottom;
            var g = e.Graphics;
 
 
            g.TranslateTransform(Padding.Left, Padding.Top);
            g.SmoothingMode = SmoothingMode.HighQuality;
 
            //Вычисляем сумму всех параметров
            var sum = 0;
            for (int i = 0; i < Data.Count; i++)
                sum += Data[i];
 
            //Радиус окружности
            var r = Math.Min(w / 2, h / 2);
            //центр
            var c = new Point(w / 2, h / 2);
 
            //окружность
            g.DrawEllipse(Pens.Red, w / 2 - r, h / 2 - r, 2 * r, 2 * r);
 
            //сегменты
            var angle = 0d;
            for (int i = 0; i < Data.Count; i++)
            {
                var dx = (float)(Math.Cos(angle) * r);
                var dy = (float)(Math.Sin(angle) * r);
                g.DrawLine(Pens.Red, c.X, c.Y, c.X + dx, c.Y + dy);
 
                angle += 2d * Math.PI * Data[i] / sum;
            }
        }
    }
}

Название: 0.png
Просмотров: 100

Размер: 27.8 Кб

@FaceHoof · 29.02.2016, 14:45 **[ТС]**

Storm23, Благодарю!
А не могли бы вы за одно сказать как закрасить секторы?

Не по теме:

Зачем вы используете тип данных var? Разве это не усложняет понимание кода и не приводит к не очевидным ошибкам вроде невозможности привидения к другому типу?

@nedel · 29.02.2016, 14:52

А я б использовал методы Graphics.DrawPie i Graphics.FillPie

@FaceHoof · 29.02.2016, 15:24 **[ТС]**

nedel, спасибо за подсказку. Я так понимаю, это значительно упростит заливку секторов. Но не могли бы вы мне показать конкретный пример? А то у меня не получается разобраться с параметрами startAngle и sweepAngle (https://msdn.microsoft.com/ru-... .110).aspx)

@nedel · 29.02.2016, 15:56

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
 
namespace WindowsFormsApplication55
{
    public partial class Form1 : Form
    {
        private List<ChartItem> lstParameters = new List<ChartItem>();
 
        public Form1()
        {
            InitializeComponent();
 
            lstParameters.Add(new ChartItem(500, Color.Green));
            lstParameters.Add(new ChartItem(250, Color.Gold));
            lstParameters.Add(new ChartItem(250, Color.SteelBlue));
            lstParameters.Add(new ChartItem(250, Color.OrangeRed));
 
            new ChartPanel { Parent = this, Dock = DockStyle.Fill, Data = lstParameters };
 
        }
    }
    public class ChartItem
    {
        public ChartItem(int val, Color color)
        {
            Value = val;
            Color = color;
        }
        public int Value
        {
            get; private set;
        }
        public Color Color { get; private set; }
    }
    public class ChartPanel : Control
    {
        public List<ChartItem> Data { get; set; }
 
        public ChartPanel()
        {
            SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true);
 
            Padding = new Padding(20);
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            if (Data == null) return;
 
            var w = ClientSize.Width - Padding.Left - Padding.Right;
            var h = ClientSize.Height - Padding.Top - Padding.Bottom;
            var g = e.Graphics;
 
 
            g.TranslateTransform(Padding.Left, Padding.Top);
            g.SmoothingMode = SmoothingMode.HighQuality;
 
            //Вычисляем сумму всех параметров
            var sum = 0;
            for (int i = 0; i < Data.Count; i++)
                sum += Data[i].Value;
 
            //Диаметр окружности
            var d = Math.Min(w, h);
 
            //сегменты
            float angle = 0;
            foreach (ChartItem item in Data)
            {
                float delta = 360f * item.Value / sum;
                using (Brush brush = new SolidBrush(item.Color))
                {
                    g.FillPie(brush, 0, 0, d, d, angle, delta);
                }
                using (Pen pen = new Pen(Color.Black))
                {
                    g.DrawPie(pen, 0, 0, d, d, angle, delta);
                }
                angle += delta;
            }
           
        }
    }
}

@FaceHoof · 29.02.2016, 16:19 **[ТС]**

nedel, Благодарю

Но я хочу не просто списать готовое, а научиться. Поэтому, если вам не трудно, скажите правильно ли я понял происходящее в цикле:
angle - это угол относительно оси Х под которым будет нарисована первая стенка нашего сектора. В случаи если он равен 0, то будет горизонтальная линия?
delta - угол относительно angle, создаёт вторую стенку сектора?
Мы должны каждый раз прибавлять к angle delta, чтобы каждый новый сектор начинался на месте завершения старого?
Мы рисуем прозрачный сектор поверх цветного просто для того, чтобы были границы?

@nedel · 29.02.2016, 16:23

так все и работает

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

Создание диаграмм

Решение

Решение

@FaceHoof 113 / 100 / 68 Регистрация: 21.04.2014 Сообщений: 1,420
	29.02.2016, 14:45 [ТС]
	Storm23, Благодарю! А не могли бы вы за одно сказать как закрасить секторы? Не по теме: Зачем вы используете тип данных var? Разве это не усложняет понимание кода и не приводит к не очевидным ошибкам вроде невозможности привидения к другому типу? 0

@nedel 1167 / 885 / 517 Регистрация: 09.04.2014 Сообщений: 2,098
	29.02.2016, 14:52
	А я б использовал методы Graphics.DrawPie i Graphics.FillPie 2

@FaceHoof 113 / 100 / 68 Регистрация: 21.04.2014 Сообщений: 1,420
	29.02.2016, 15:24 [ТС]
	nedel, спасибо за подсказку. Я так понимаю, это значительно упростит заливку секторов. Но не могли бы вы мне показать конкретный пример? А то у меня не получается разобраться с параметрами startAngle и sweepAngle (https://msdn.microsoft.com/ru-... .110).aspx) 0

@FaceHoof 113 / 100 / 68 Регистрация: 21.04.2014 Сообщений: 1,420
	29.02.2016, 16:19 [ТС]
	nedel, Благодарю Но я хочу не просто списать готовое, а научиться. Поэтому, если вам не трудно, скажите правильно ли я понял происходящее в цикле: angle - это угол относительно оси Х под которым будет нарисована первая стенка нашего сектора. В случаи если он равен 0, то будет горизонтальная линия? delta - угол относительно angle, создаёт вторую стенку сектора? Мы должны каждый раз прибавлять к angle delta, чтобы каждый новый сектор начинался на месте завершения старого? Мы рисуем прозрачный сектор поверх цветного просто для того, чтобы были границы? 0

@nedel 1167 / 885 / 517 Регистрация: 09.04.2014 Сообщений: 2,098
	29.02.2016, 16:23
	так все и работает 1