Форум программистов, компьютерный форум CyberForum.ru
Наши страницы

Программирование Android

Войти
Регистрация
Восстановить пароль
 
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
#1

Нарисовать круговую диаграмму с разной высотой для каждой части - Программирование Android

30.12.2015, 16:40. Просмотров 424. Ответов 13
Метки нет (Все метки)

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

Делать пытаюсь на канвасе, код который рисуте круговую диаграмму ниже
Java
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
public class RoundView extends View {
    private Paint slicePaint;
    private int[] sliceClrs = { Color.GREEN, Color.BLUE, Color.RED, Color.YELLOW };
    private RectF rectf;
    private float[] datapoints;
 
    public RoundView(Context context, AttributeSet attrs) {
        super(context, attrs);
        slicePaint = new Paint();
        slicePaint.setAntiAlias(true);
        slicePaint.setDither(true);
        slicePaint.setStyle(Paint.Style.FILL);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        if (this.datapoints != null) {
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom;
 
            rectf = new RectF(startLeft, startTop, endRight, endBottom);
 
            float[] scaledValues = scale();
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
                sliceStartPoint += scaledValues[i];
            }
        }
    }
 
    public void setDataPoints(float[] datapoints) {
        this.datapoints = datapoints;
        invalidate();
    }
 
    private float[] scale() {
        float[] scaledValues = new float[this.datapoints.length];
        float total = getTotal();
        for (int i = 0; i < this.datapoints.length; i++) {
            scaledValues[i] = (this.datapoints[i] / total) * 360;
        }
        return scaledValues;
    }
 
    private float getTotal() {
        float total = 0;
        for (float val : this.datapoints)
            total += val;
        return total;
    }
}
Вызываем вот так
Java
1
2
3
RoundView pieChartView = (RoundView) findViewById(R.id.round);
        float[] datapoints = {450, 1230, 200, 400};
        pieChartView.setDataPoints(datapoints);
Рисует просто круг и елит его на части... Что то мне подсказывает что нужно искать и делать как то по другому, потому что в канве не получается так гибко это реализовать... А может я чего то не знаю) Подскажите что нибудь плиз)
0
Миниатюры
Нарисовать круговую диаграмму с разной высотой для каждой части  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.12.2015, 16:40
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Нарисовать круговую диаграмму с разной высотой для каждой части (Программирование Android):

Как нарисовать красивую круговую диаграмму - Программирование Android
Пишу приложение, в котором нужно рисовать круговые диаграммы. Использую canvas и drawArc(). Но получается не красиво, слишком примитивно. В...

Построить круговую диаграмму распределения количества элементов в каждом интервале для каждой строки матрицы - QBasic
&quot;Дан массив А(10,60) значения элементов заданы случайными числами в пределах: 1,2,3,9 строки от А1 до В1 (А1=-10 , В1=300 ) ...

Нарисовать круговую диаграмму - Delphi
Нарисовать круговую диаграмму со значениями 20%, 30%, 50%

Нарисовать круговую диаграмму - C#
Здравствуйте. Подскажите пожалуйста, можно ли(если да, то как) в MS Visual Studio 2010 нарисовать график, как на картинке в с помощью...

Нарисовать круговую диаграмму процентного соотношения - QBasic
помогите, пожалуйста!!! надо нарисовать круговую диаграмму процентного соотношения богатых(9%), людей среднего класса(15%), бедных...

Как нарисовать гистограмму и круговую диаграмму в WPF? - C# WPF
Никак не могу разобраться, как нарисовать гистограмму и круговую диаграмму в WPF подскажите простенький пример, или код...

13
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 17:10 #2
dajver, все очень просто - вместо rectf
Java
1
canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
нужно использовать круг с тем же центром, но другим радиусом.
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 17:17  [ТС] #3
Цитата Сообщение от Spelcrawler Посмотреть сообщение
нужно использовать круг с тем же центром, но другим радиусом.
Не совсем понял, можете привести пример плиз? Мне получается нужно несколько кругов рисовать поверх, а не один бить на части?
0
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 17:24 #4
dajver, все точно так же как и сейчас, но вместо одного круга нужно создать несколько (по количеству частей) и желательно их создавать в конструкторе, можно даже просто пустые (нужно чтобы память на них сразу выделилась один раз, а не выделялась при каждой перерисовке). Потом уже в onDraw задаем им всем один центр (тот же, который сейчас у rectf), ну и радиусы каждому по вкусу. И рисуем слайсы точно тем же кодом
Java
1
2
3
4
5
for (int i = 0; i < scaledValues.length; i++) {
     slicePaint.setColor(sliceClrs[i]);
     canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
     sliceStartPoint += scaledValues[i];
}
Только вместо rectf в каждой итерации цикла подставляем нужный RectF. Т.е. получается что рисуем на каждый RectF только один кусок, но выглядеть будет будто это целый круг, но у каждого слайса своя высота.

Добавлено через 35 секунд
Хотя можно даже один RectF использовать, просто у него перед отрисовкой частей менять радиус.
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 17:31  [ТС] #5
Цитата Сообщение от Spelcrawler Посмотреть сообщение
и желательно их создавать в конструкторе, можно даже просто пустые
Вот этой части совсем не понял, а так можно?

И заполнять получается их просто найди по айдишнику и указав цвет?

Добавлено через 4 минуты
Цитата Сообщение от Spelcrawler Посмотреть сообщение
Хотя можно даже один RectF использовать, просто у него перед отрисовкой частей менять радиус.
Надо будет попробовать кстати, что то тупанул
0
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 17:42 #6
dajver, чет я немного попутал) Это же квадрат получается. Тогда выходит так в конструкторе пишем:
Java
1
rectf = new RectF();
Потом в onDraw()

Java
1
2
3
4
5
6
7
8
9
10
11
12
//В самом начале метода
rectf.set(startLeft, startTop, endRight, endBottom);
 
//В цикле отрисовки слайсов
float width = //Нужная ширина, для прямоугольника в который будет вписан круг, именно для текущего слайса
float height = //Нужная высота, для прямоугольника в который будет вписан круг, именно для текущего слайса
 
float centerX = rectf.centerX();
float centerY = rectf.centerY();
 
rectf.set(centerX - width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2);
//И далее все тот же код из этого цикла вообще без изменений
Добавлено через 3 минуты
И еще
Java
1
2
float centerX = rectf.centerX();
float centerY = rectf.centerY();
Это тоже можно вынести до цикла, т.к. центр всегда один будет.
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 19:00  [ТС] #7
Цитата Сообщение от Spelcrawler Посмотреть сообщение
dajver, чет я немного попутал) Это же квадрат получается. Тогда выходит так в конструкторе пишем:
Что то я не так делаю, или вы что то напутали) Можете плиз выложить код как должен выглядеть ondraw, а то у меня оно рисуте как то криво теперь, и размеры не меняются слайсов.

Вот как у меня выглядит
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Override
    protected void onDraw(Canvas canvas) {
        if (this.datapoints != null) {
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom;
 
            rectf = new RectF(startLeft, startTop, endRight, endBottom);
 
            float width = 500;
             float height = (float)Math.random() * (50 + 300);
 
            rectf.set(centerX - width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2);
 
            float[] scaledValues = scale();
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
                sliceStartPoint += scaledValues[i];
            }
        }
    }

Java
1
2
float centerX = rectf.centerX();
float centerY = rectf.centerY();
Это я вынес в конструктор
0
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 19:01 #8
Цитата Сообщение от dajver Посмотреть сообщение
Это я вынес в конструктор
Нужно в onDraw, после rectf.set()
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 19:04  [ТС] #9
Цитата Сообщение от Spelcrawler Посмотреть сообщение
Нужно в onDraw, после rectf.set()
Java
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
@Override
    protected void onDraw(Canvas canvas) {
        if (this.datapoints != null) {
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom;
 
            rectf.set(startLeft, startTop, endRight, endBottom);
 
            centerX = rectf.centerX();
            centerY = rectf.centerY();
 
            float width = 500;
            float height = (float)Math.random() * (50 + 300);
 
            rectf.set(centerX - width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2);
 
            float[] scaledValues = scale();
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
                sliceStartPoint += scaledValues[i];
            }
        }
    }
0
Миниатюры
Нарисовать круговую диаграмму с разной высотой для каждой части  
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 19:04  [ТС] #10
Оно почему то его сплющивает, а не по отдельности слайсы делает)
0
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 19:08 #11
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
А если так?
Java
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
@Override
    protected void onDraw(Canvas canvas) {
        if (this.datapoints != null) {
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom;
 
            rectf.set(startLeft, startTop, endRight, endBottom);
 
            centerX = rectf.centerX();
            centerY = rectf.centerY();           
 
            float[] scaledValues = scale();
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                float width = 500;
                height = (float)Math.random() * (50 + 300); 
                rectf.set(centerX - width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2);
 
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint);
                sliceStartPoint += scaledValues[i];
            }
        }
    }
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 19:13  [ТС] #12
некрасиво сплющиваети получается что слайсы разлазятся...
0
Миниатюры
Нарисовать круговую диаграмму с разной высотой для каждой части  
Spelcrawler
526 / 496 / 111
Регистрация: 12.03.2014
Сообщений: 1,649
Завершенные тесты: 1
30.12.2015, 19:17 #13
dajver, еще забыл тут по идее ширина и высота должны быть одинаковые)
1
dajver
409 / 273 / 18
Регистрация: 18.09.2010
Сообщений: 1,112
30.12.2015, 19:19  [ТС] #14
Цитата Сообщение от Spelcrawler Посмотреть сообщение
dajver, еще забыл тут по идее ширина и высота должны быть одинаковые)
а ну блин, логично, мог и сам догадаться. спасибо огромное теперь все круто)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.12.2015, 19:19
Привет! Вот еще темы с ответами:

Построить круговую диаграмму для массива из заданных чисел - Visual Basic
Подскажите пожалуйста, как построить круговую диаграмму в VB для массива из заданных чисел, например (10, 20, 30, 40, 50, 78, 54, 44, 77,...

Создать круговую диаграмму - HTML, CSS
помогите пожалуйста сделать круговую диаграмму 25 % в html это пример как должна выглядить диаграмма

Сделать круговую диаграмму - Matlab
Дан массив чисел (например: A=). Нужно сделать круговую диаграмму, чтобы доля была ровна по площади числу из массива и число определяет...

Составить круговую диаграмму - PascalABC.NET
Части света имеют площади (в млн. км): Европа -10,5; Азия – 44,4; Африка – 30, 32; Северная Америка – 24, 25; Южная Америка – 17, 83;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Yandex
Объявления
30.12.2015, 19:19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru