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

Question

我有一个基本的 CanvasJS 内部图表和 AngularJS 控制器，它显示来自该控制器 $scope 的数据。我真的不知道这些信息是否相关，但也许它会帮助您更好地理解创建条形图的上下文。无论如何，我想为每个条添加索引标签，以显示每个条上方每个数据点的值。我查看了 CanvasJS 文档并尝试将 Index 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 条形图索引标签的片段

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

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

希望这对您有所帮助。

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

AngularJS and CanvasJS Bar Chart Index Labels - how to show them?

javascript

html

canvasjs