1

我正在使用 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>
4

1 回答 1

0

如果要在 xAxis 中旋转标签，只需添加“rotateLabels：-45”

例如，

xAxis: {
                        axisLabel: 'Hours',
                        axisLabelDistance: 20,
                        showMaxMin: false,
                        rotateLabels: -45
                    },
于 2017-10-19T10:40:28.667 回答