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

Question

我正在使用 angular-chart.js图表饼图。

我需要像 horizo​​ntalAlign: "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 结构:

您可以为元素添加自己的样式。

编辑像这样输入 html:

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

编辑 2.

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

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

以上

drawLegendBox(x, y, legendItem);

在第 6553 行更准确。