nvd3 angular-nvd3 d3 Вертикальное отображение легенды диаграммы

Я создаю круговую диаграмму, используя nvd3 и angular-nvd3. У меня отображается моя легенда, но она находится в строке сверху.

Я хотел бы отобразить его в столбце слева.

Я нашел http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview, но когда я использую параметры находится в файле .js, то все, что нужно сделать, это изменить внешний вид легенды, а не ее размещение.

Файл css пуст, и в html, похоже, нет встроенного css. Поэтому я не уверен, как они разместили легенду справа в столбце.

Я вижу legendPosition: 'right', но когда я использую legendPosition: 'left', вся круговая диаграмма исчезает.

Так по крайней мере, как мне отображать в столбце, и было бы здорово, если бы я мог изменить его влево.

Объект опций:

$scope.patientsChart = {
     chart: {
            type: 'pieChart',
            height: 500,
            x: function (d) {
                var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
                return PatientStatuses[d.Key -1];
            },
            y: function (d) { return d.Value.length; },
            showLabels: true,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            showLegend: false,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },
            pie: {
                dispatch: {
                    //elementClick: function (e) { console.log(e) }
                }
            },
            color: function (d) {
                var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
                return colors[d.Key - 1];
            }
        }
    };

Директива для angular-nvd3:

<nvd3 options="FEV1Chart" data="patients"></nvd3>

d3.js nvd3.js angular-nvd3
person James White    schedule 26.01.2016    source источник
comment
Можете ли вы опубликовать свой код, пожалуйста?   -  person Giordano    schedule 26.01.2016
comment
В исходном коде nv.d3.js единственными вариантами конфигурации legendPosition являются 'top' и 'right'. Хитрый способ переместить легенду — увеличить ее отступ, как я сделал в этом плункере., но без изменения того, как исходный код отображает SVG, я не уверен, как получить круговую диаграмму и легенду рядом с легендой слева. Вы можете видеть, что я пытался захватить соответствующие классы CSS и манипулировать ими таким образом, но безуспешно.   -  person Bennett Adams    schedule 27.01.2016
comment
У людей есть много возможностей присоединиться и внести свой вклад в подобные функции. Если это то, что вам небезразлично, создайте это и сделайте запрос на включение! Это тоже весело. Поскольку angular-nvd3 — это всего лишь прокладка вокруг nvd3, большая часть того, что вам нужно, будет добавлять мясо в models/pieChart.js github.com/novus/nvd3/blob/master/src/models/pieChart.js   -  person Eric Hartford    schedule 03.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите повернуть метки в xAxis, просто добавьте «rotateLabels: -45»

Например,

xAxis: {
                        axisLabel: 'Hours',
                        axisLabelDistance: 20,
                        showMaxMin: false,
                        rotateLabels: -45
                    },
person Cátia Matos    schedule 19.10.2017