Перекрывающиеся бары на гистограмме c3 (v4) - PullRequest
Новая
       54

Перекрывающиеся бары на гистограмме c3 (v4)

0 голосов
/ 10 мая 2018

Я хотел бы сделать ссылку на этот предыдущий вопрос:

столбчатая диаграмма с перекрытием столбцов C3js

Тем не менее, моя единственная проблема заключается в том, что я хочу перекрыть столбцы, чтобы показать (в качестве примера), что из 4 учеников 3 сдали предмет. Прямо сейчас у меня есть бар с высотой 3 и сверху бар с высотой 4, что делает его 7, и я хочу бар 4 с перекладиной 3 перекрытия. Как я могу изменить свой код? Спасибо: 

        <div id="chart3"></div>
        <script>
            var chart = c3.generate({
                bindto: '#chart3',
                data: {
                    url: '../static/CSV/Chart_data/number_students.csv,
                    x:'AC_YEAR',
                    type: 'bar',
                    groups: [
                        ['Total women', 'Passed women'],
                        ['Total men', 'Passed men']
                    ],
                },
                axis: {
                    y: {
                        label: {
                            text:"Number of students",
                            position: "outer-middle"
                        },
                    },
                    x: {
                        label: {
                            text:"Year",
                            position: "outer-center"
                        },
                    }
                },
                size: {
                    height: 400,
                    width: 800
                },
                bar:{
                    width:{ratio:0.7}
                },
                legend: {
                        show: true,
                        position: 'inset',
                        inset: {
                            anchor: 'top-right',
                            x: 10,
                            y: 5,
                            step: 2
                        }
                    }        
            }); 
        </script>

CSV-файл number_students: 

AC_YEAR,Passed women,Passed men,Total women,Total men
2010,72,239,98,315
2011,77,227,83,276
2012,65,226,93,298
2013,54,215,77,283
2014,63,233,88,294
2015,49,205,64,267

Текущий выглядит так:

Without overlapping bars

И тот, который я хочу, должен перекрываться, чтобы, например, в 2010 году мы видели только немного зеленого цвета (7 учениц, которые не сдали), потому что синий цвет впереди всего на 7 единиц меньше, чем зеленый , А в правильных 29 единицах красного цвета (ученики мужского пола, которые не сдали).

1 Ответ

0 голосов
/ 10 мая 2018

Я никогда раньше не работал с c3, поэтому я понятия не имею, есть ли в c3 какой-либо график, который может это сделать. Я смог решить эту проблему с помощью d3.

Во-первых, c3 использует path для баров вместо rects по какой-то причине, в противном случае изменение width баров могло бы быть проще.

Сначала я сохранил все размеры столбцов для всех четырех категорий в четырех различных массивах, используя d3.select(**bars**).node().getBBox(), а затем отрегулировал y и width для столбцов Total women и Total men в соответствии с y атрибуты Passed women и Passed men, потому что мы хотим перекрывать их.

Затем скрыть все элементы path, созданные c3, а затем обернуть все это в функцию, которая будет вызываться, когда пользователь изменяет размер окна браузера.

Вот полная скрипка или планкр

...