nvd3 angular-nvd3 d3垂直显示图表图例

Question

我正在使用nvd3和angular-nvd3创建一个饼图。我已经显示了我的图例，但它是在顶部的一行中。

我想把它放在左边的一栏里。

我找到了http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview，但当我使用.js文件中的选项时，所做的只是改变图例的外观，而不是位置。

css文件是空的，并且html中似乎没有内联css。所以我不确定他们是如何在一列中将图例的位置放在右边。

我确实看到了legendPosition: 'right'，但是当我使用legendPosition: 'left'时，整个饼图就消失了。

因此，至少我如何在一列中显示，如果我可以将它更改为左侧，那就太好了。

Options对象：

$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>

Answer 1

如果你想在xAxis中使用rotateLabels，只需添加"rotateLabels：-45“

例如,

xAxis: {
                        axisLabel: 'Hours',
                        axisLabelDistance: 20,
                        showMaxMin: false,
                        rotateLabels: -45
                    },