角圖餅圖上的重疊圖例

Question

我正在使用角度圖（目的是簡化顯示圖表之類的工作）。 到目前為止， 這非常簡單 ，我能夠使我的餅圖完美地呈現出來。

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上發現的：

<span style="background-color:rgba(151,187,205,1)"></span> Download sales

我的是：

<span style="background-color:rgba(151,187,205,1)">Download sales</span>

為了更正此問題，我研究了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>"

這會將標簽文本移出<span>標記，從而有效解決了重疊問題。