角度图表默认情况下如何显示图例数据值以及图例名称-Java 学习之路

我正在使用angularjs图表，Chart.min.js和angular-chart.min.js

它仅显示图例中的“标签”，我希望默认情况下还可以看到“数据”以及标签，作为图例的一部分或在饼图部分本身内 .

任何人都可以帮忙吗？

HTML:
    <div class="col-lg-6 col-sm-12" ng-controller="PieCtrl">
                  <div class="panel panel-default">
                    <div class="panel-heading">Pie Chart</div>
                    <div class="panel-body">
                        <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options" chart-hover="chartOver"  chart-click="chartPortionClick"></canvas> 
                     </div>
                  </div>
                </div>

    JS:
      var app = angular.module('demoApp', ['chart.js', 'ui.bootstrap']);
          app.controller('PieCtrl', ['$scope', function ($scope) {
            $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales','test'];
            $scope.data = [300, 500, 100, 10];
            $scope.options = { legend: { display: true } };
      }]);

2 回答

我正在使用角度图1.0.2 . 在我的版本中，我正在使用它;

$scope.options = {
    legend: {display: true},
    legendTemplate:
    "<ul class=\"<%=name.toLowerCase()%>-legend\">" +
      "<% for (var i=0; i<segments.length; i++){%>" +
        "<li>" +
          "<span style=\"background-color:<%=segments[i].fillColor%>\"></span>" +
          "<%=segments[i].label%> (<%=segments[i].value%>)" +
        "</li>" +
      "<%}%>" +
    "</ul>",
};

回复于 2024-05-08T10:22:27+08:00

你需要使用legendTemplate，确保你替换app中的$ scope.data：P

var options = {
legendTemplate: "<ul><% for (var i=0; i<data.length; i++){%><li><span style=\"background-color:<%=data[i].color%>\"></span><%=data[i].label%> - <%=data[i].value%></li><%}%></ul>"

}

看到这个jsfiddle

http://jsfiddle.net/vrwjfg9z/3010/

回复于 2024-05-08T10:22:27+08:00

角度图表默认情况下如何显示图例数据值以及图例名称

2 回答

相关问题