[英]Overlapping Legends on Angular-Chart's Piechart
I am using angular-charts (in a bid to simplify my life when it comes to displaying charts and stuff). 我正在使用角度图(目的是简化显示图表之类的工作)。 So far, it had been pretty straightforward and I was able to render my piechart perfectly fine.
到目前为止, 这非常简单 ,我能够使我的饼图完美地呈现出来。
HTML: HTML:
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
Javascript: Javascript:
angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});
However, now that I try to include the chart's legends, I have run into an issue; 但是,由于我现在尝试包括图表的图例,所以我遇到了一个问题。 my legend labels are overlapping and I am not sure how to solve it (if there is indeed a workaround?!).
我的图例标签重叠,并且我不确定如何解决(如果确实有解决方法?!)。 Would greatly appreciate any help on this, :)
非常感谢任何帮助,:)
UPDATE: 更新:
.col-xs-12.col-sm-12.col-md-6
.panel.panel-primary(ng-controller='pieChartController')
.panel-heading
h2.panel-title Title
.panel-body
canvas#pie.chart.chart-pie(chart-data='data', chart-labels='labels', chart-legend='true', chart-options='options')
UPDATE: 更新:
Upon inspection of my pie chart's legends, I find that it is subjected to the following CSS rules: 在检查饼图的图例后,我发现它遵循以下CSS规则:
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
-webkit-padding-start: 0;
/* Webkit */
-moz-padding-start: 0;
/* Mozilla */
padding-left: 0;
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
}
in angular-chart.css. 在angular-chart.css中。
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
in bootstrap.css. 在bootstrap.css中。
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default;
}
in angular-chart.js. 在angular-chart.js中。
For future reference, in case anyone runs into the same odd problem as me, ... 供以后参考,以防万一有人遇到与我相同的奇怪问题,...
I have checked and double-checked and can confirm that I was indeed using the latest versions of Chart.js
and angular-chart.js
(which @J.Titus was also using in his Plunkr). 我已经检查并仔细检查了一下,可以确认我确实在使用
Chart.js
和angular-chart.js
的最新版本(@ J.Titus在他的Plunkr中也使用了最新版本)。
"chart.js": "^1.0.2"
"angular-chart.js": "~0.8.8"
Yet, strangely, I found something really odd. 但是,奇怪的是,我发现确实有些奇怪。
I was inspecting the elements on your Plunkr in hopes of finding a clue as to what's different. 我正在检查您的Plunkr上的元素,希望找到有什么不同的线索。 I found this on @J.Titus' Plunkr:
我在@ J.Titus的Plunkr上发现的:
<span style="background-color:rgba(151,187,205,1)"></span> Download sales
On mine, it was: 我的是:
<span style="background-color:rgba(151,187,205,1)">Download sales</span>
In order to correct this, I delved into Chart.js
and changed all occurrences of legendTemplate
( ctrl + F
is your best friend!) to the following: 为了更正此问题,我研究了
Chart.js
并将所有出现的legendTemplate
( ctrl + F
是您最好的朋友!)更改为以下内容:
"<ul class=\\"<%=name.toLowerCase()%>-legend\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\"background-color:<%=segments[i].fillColor%>\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
This moves the label text out of the <span>
tag, effectively resolving the overlap issue. 这会将标签文本移出
<span>
标记,从而有效解决了重叠问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.