Question

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

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

我还将Chart.HorizontalBar.js（https://github.com/tomsouthall/Chart.HorizontalBar.js）添加到我的项目中。这有什么特别的整合吗？

Answer 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
        });
    });

}]);

水平条形图 - angular-chart.js

1 个答案: