Question

我有一个基本的CanvasJS图表和AngularJS控制器，它显示来自该控制器的$ scope的数据。我真的不知道这些信息是否相关，但它可能会帮助您更好地理解创建条形图的背景。无论如何，我想在每个条形图上添加索引标签，以显示每个条形图上方每个数据点的值。我查看了CanvasJS文档并尝试将索引Label: "{y}"放在dataset对象内部和数据数组中，但似乎没有任何效果。图表会加载，但索引标签根本不可见。这是我下面的图表摘要。

ageChart = new Chart(document.getElementById("ageChart").getContext("2d")).Bar({
	   labels: ['Critical', 'Major', 'Minor'],
	   datasets: [{
                       fillColor: "rgba(151,187,205,0.5)",
                       strokeColor: "rgba(151,187,205,0.8)",
                       highlightFill: "rgba(151,187,205,0.75)",
                       highlightStroke: "rgba(151,187,205,1)",
                       data: [$scope.employeeData.data1, $scope.employeeData.data2, $scope.employeeData.data3]
				}]
				  }, {showScale: false, responsive: true, barValueSpacing: 25});

提前致谢！

Answer 1

以下是使用AngularJS显示CanvasJS条形图索引标签的剪辑。

＆＃13;

var myapp = angular.module("myapp", []);

myapp.controller("MyCtrl", ["$scope",function($scope){
  $scope.data = [{
                  x: 1,
                  y: 10,
                  indexLabel:"{y}"
                },
                {
                  x: 2,
                  y: 20,
                  indexLabel:"{y}"
                },
                {
                  x: 3,
                  y: 30,
                  indexLabel:"{y}"
                },
                {
                  x: 4,
                  y: 20,
                  indexLabel:"{y}"
                },
                {
                  x: 5,
                  y: 10,
                  indexLabel:"{y}"
                }];
  var chart = new CanvasJS.Chart("chartContainer", {
    data: [{
      type: "bar",
      dataPoints: $scope.data
    }]
  });
  chart.render();
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div ng-app="myapp" ng-controller="MyCtrl">
  <div id="chartContainer" style="height: 320px; width: 100%;"></div>
</div>

＆＃13;

希望这会帮助你。

AngularJS和CanvasJS条形图索引标签 - 如何显示它们？

1 个答案: