0

私はAngular-Chartsを使用しています（チャートやものを表示するときに私の人生を簡素化するために）。ここまでは非常に簡単で、円グラフを完璧にレンダリングすることができました。

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 で。

4

1 に答える 1

1

今後の参考のために、誰かが私と同じ奇妙な問題に遭遇した場合に備えて...

私はチェックとダブルチェックを行い、実際にChart.jsandの最新バージョンを使用していたことを確認できます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>

これを修正するために、 ( is your best friend!)Chart.jsのすべての出現箇所を調べて、次のように変更しました。legendTemplatectrl + 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>タグの外に移動し、オーバーラップの問題が効果的に解決されます。

于 2016-02-29T03:05:44.130 に答える