如何在angular-chart.js中对齐图例-Java 学习之路

我正在使用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"
        }
    };
});

1 回答

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

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

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

Explanation:

该指令创建了这个html结构：
enter image description here

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

Edit 输入这样的html：

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

Edit 2.

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

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

以上

drawLegendBox(x, y, legendItem);

更确切地说，在6553线上 .

回复于 2024-05-09T02:01:39+08:00

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

我的代码

1 回答

相关问题