水平条形图 - angular-chart.js答案

【问题标题】：Horizontal Bar-Chart - angular-chart.js水平条形图 - angular-chart.js
【发布时间】：2016-04-01 00:18:55
【问题描述】：

如何在 angular-chart.js 中集成水平条形图？我将这段代码添加到 angular-chart.js 文件中，但在提供新类型时收到错误消息。

   .directive('chartHorizontalBar', function (ChartJsFactory) { return new ChartJsFactory('HorizontalBar'); });

我还将 Chart.HorizontalBar.js (https://github.com/tomsouthall/Chart.HorizontalBar.js) 添加到我的项目中。有什么特殊的集成吗？

【问题讨论】：

标签： angularjs chart.js

【解决方案1】：

   <canvas id="canvas"></canvas>

   <script type="text/javascript" src="Chart.min.js"></script>
   <script type="text/javascript" src="Chart.HorizontalBar.js"></script>
   <script type="text/javascript" src="angular-chart.min.js"></script>
   <script type="text/javascript" src="app.js"></script>

   var app = angular.module('app', ['chart.js']);

   app.controller('ChartController', ['$scope', '$document',
      function($scope,$document){
        var randomScalingFactor = function(){
           return Math.round(Math.random()*100);
        };

    var barChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205, 1)",
                pointHighlightFill: '#fff',
                pointHighlightStroke : "rgba(151,187,205,0.8)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]
    };

    angular.element($window).bind('load', function() {
        var ctx = $document[0].querySelector('#canvas').getContext("2d");
        var chart = new Chart(ctx).HorizontalBar(barChartData, {
            responsive: true,
            barShowStroke: false
        });
    });

}]);

【讨论】：