Angular-Charts 饼图上的重叠图例

Question

我正在使用 angular-图表（为了在显示图表和其他内容时简化我的生活）。到目前为止，it had been pretty straightforward 并且我能够完美地渲染我的饼图。

HTML:

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

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];
});

但是，既然我尝试包含图表的图例，我运行就成了一个问题；我的图例标签重叠，我不确定如何解决它（如果确实有解决方法？！）。非常感谢对此的任何帮助:)

更新：

.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')

更新：

检查我的饼图图例后，我发现它遵循以下 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) */
}

在angular-chart.css.

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

在 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;
}

在angular-chart.js.

Answer 1

供日后参考，万一有人遇到和我一样奇怪的问题，...

我已经反复检查并确认我确实使用了最新版本的 Chart.js 和 angular-chart.js（@J.Titus 也在他的 Plunkr 中使用） .

"chart.js": "^1.0.2"
"angular-chart.js": "~0.8.8"

然而，奇怪的是，我发现了一些非常奇怪的东西。

我正在检查您的 Plunkr 上的元素，希望找到不同之处的线索。我在@J.Titus' Plunkr:

上找到了这个

 Download sales

我的是：

Download sales

为了纠正这个问题，我深入研究了 Chart.js 并将出现的所有 legendTemplate（ctrl + F 是你最好的朋友！）更改为以下内容：

"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

这会将标签文本移出  标签，有效地解决了重叠问题。

Angular-Charts 饼图上的重叠图例

Overlapping Legends on Angular-Chart's Piechart

javascript

angularjs

angular-chart