如何在angular-chart.js中对齐图例

Question

II＆＃39; m使用angular-chart.js图表饼。

我需要将图例与horizontalAlign: "right", verticalAlign: "center"对齐，但我不知道该怎么做。

我的代码

HTML：

<canvas id="pie" class="chart chart-pie"
      chart-data="data" chart-labels="labels" chart-options="options">
</canvas>

模块：

angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];
    $scope.options = { 
        legend : { 
            display : true, 
            position : "right"
        }
    };
});

Answer 1

只需将此样式添加到您的css：

.chart-container {
    position: relative;
}
chart-legend {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
}

我已经编辑了我的代码。这会使您的图例水平向右对齐，在中间垂直对齐。

<强>解释

该指令创建了这个html结构： this

您可以将自己的样式添加到元素中。

修改 输入这样的HTML：

<style>
   .chart-container {
        position: relative;
    }
    chart-legend {
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translateY(-50%);
    }
</style>

编辑2。

上面的代码适用于旧版本。对于较新版本，请打开并添加此代码

y += me.height/2 - itemHeight*me.legendItems.length/2;

上面

drawLegendBox(x, y, legendItem);

更准确地说是在第6553行。