[英]How to align legend in angular-chart.js
II'm using an angular-chart.js chart-pie. 我正在使用angular-chart.js chart-pie。
I need to align the legend like horizontalAlign: "right", verticalAlign: "center"
, but I have no idea how to do it. 我需要将图例对齐为horizontalAlign: "right", verticalAlign: "center"
,但我不知道该怎么做。
HTML: HTML:
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
Module: 模块:
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"
}
};
});
Just add this style to your css: 只需将此样式添加到您的CSS:
.chart-container {
position: relative;
}
chart-legend {
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-50%);
}
I have edited my code. 我编辑了我的代码。 This will align your legend horizontally to the right and vertically in the middle. 这将使您的图例水平向右对齐,在中间垂直对齐。
Explanation: 说明:
The directive creates this html structure: 该指令创建了这个html结构:
You can add your own style to the elements. 您可以将自己的样式添加到元素中。
Edit Put in html like this: 编辑放入html,如下所示:
<style>
.chart-container {
position: relative;
}
chart-legend {
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-50%);
}
</style>
Edit 2. 编辑2。
The code above works for an older version. 上面的代码适用于旧版本。 For the newer version open the Chart.js and add this code 对于较新的版本,请打开Chart.js并添加此代码
y += me.height/2 - itemHeight*me.legendItems.length/2;
above 以上
drawLegendBox(x, y, legendItem);
to be more exact on line 6553. 更确切地说,在6553线上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.