Angularjs示例：Sonar中项目使用语言分布图(CoffeeScript版)

关于SonarLanguage是什么东东，这里就不在描述了，如果你对它感兴趣的话，请移步到上篇随笔开源：Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。

CoffeeScript是一门简洁的，构架于JavaScript之上的预处理器语言，可以静态编译成JavaScript，语法主要受ruby和python影响，目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有点在于：

更少，更紧凑，和更清晰的代码

通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护

在很多常用模式的实现上采用了JavaScript中的最佳实践

CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

多的也不想说那么多了，这里主要是个简介，CoffeeScript的练笔示例。

代码如下：

app = angular.module('app', [])    

    .value("$host", "http://nemo.sonarsource.org")    

    .factory("$requestUrl", ($host) -> "#{$host}/api/resources")    

    .factory("$dynamicColor", ($host) ->    

        [r,g,b] = [10,10,0]    

        {    

          getColor: ->    

               [r,g,b] = [(r+100), (g+400), (b + 200)]    

               "##{(r + 256 * g + 65536 * b).toString 16 }"

          ,    

          reset: ->    

               [r,g,b] = [10,10,0]    

        };    

    ).directive('chartData', ->    

            drawChart = (elementId, data) ->    

               chart = new AmCharts.AmPieChart()    

               chart.dataProvider = data    

               chart.titleField = "name"

               chart.valueField = "percentage"

               chart.colorField = "color"

               chart.labelsEnabled = false

               chart.pullOutRadius = 0    

               chart.depth3D = 20    

               chart.angle = 45    

               legend = new AmCharts.AmLegend()    

               legend.makerType = "square"

               legend.align = "center"

               chart.addLegend legend    

               chart.write elementId    

               chart;    

            (scope, element, attr) ->    

                  scope.already.push( ->    

                     data = scope.$eval(attr.chartData);    

                     drawChart(element[0].id, data);    

                  ) if element[0].id    

    )    

report = ($scope, $window, $http, $requestUrl, $dynamicColor) ->    

    $scope.already = []    

    $window.angularJsonpCallBack = (data) ->    

         @data = data    

         getObjectByKey = (msr , key) ->    

            m for m in msr when m.key == key    

         $scope.gridSource = $scope.projects = data    

         ready = (queues) -> angular.forEach(queues, (q) -> q() )    

         ready $scope.already    

    $scope.getLanguageChartData = ->    

         data = _.groupBy $scope.projects , (project) -> project.lang    

         $dynamicColor.reset()    

         chartData = _.map(data, (array, key) ->    

                      "name":key    

                      "percentage":array.length,    

                      "color":$dynamicColor.getColor())    

         _.sortBy(chartData, (num) -> num.percentage )    

    $scope.search = ->    

        source = []    

        if not this.searchName    

            source = @projects    

        else

            source = _.filter @projects, (p) ->    

                       p.name.toLowerCase().indexOf $scope.searchName.toLowerCase() != -1    

        source = _.sortBy(source, (p) -> p[$scope.sortCondition.key].toLowerCase()) if @sortCondition and @sortCondition.key    

        source.reverse() if @sortCondition.sort and not @sortCondition.sort[$scope.sortCondition.key]    

        @gridSource = source    

    $scope.sort = (name) ->    

        @sortCondition ?= {}    

        @sortCondition.sort ?= {}    

        @sortCondition.key = name    

        @sortCondition.sort[name] = not @sortCondition.sort[name]    

        @search();    

    $scope.init = ->    

        $http.jsonp "#{$requestUrl}?callback=angularJsonpCallBack"

app.controller "report", report

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， r语言
， rpy2 r语言
， chart
， data
， coffeescript
， source
， amcharts
， amcharts title
， scope
， ready示例
AngularJS示例
，以便于您获取更多的相关知识。