nvd3 angular-nvd3 d3垂直显示图表图例-Java 学习之路

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

1 回答

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

例如，

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

回复于 2024-05-04T16:58:50+08:00

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

1 回答

相关问题