angulajs中引用chart.js做报表,修改线条样式

目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题

 

1.下载chart js,可以用bower 命令下载

http://www.chartjs.org/docs/#line-chart-example-usage

 

2.html页面代码

<canvas id="leaderline" class="chart chart-line" data="data"

                        labels="labels" legend="true" series="series" colours="linecolours">

                </canvas>

View Code

 

3.Js数据组装(核心有个地方可以改线的样式,便于大家参考)

var funleaderbarDrawByLeader=function(pData)

    {

        $scope.overTimeLeaders=pData;

         //折线

         $scope.linecolours =[

         {

         label: "My First dataset",

         fillColor: "rgba(70,191,189,0.2)",

         strokeColor: "rgba(70,191,189,1)",

         pointColor: "rgba(70,191,189,1)",

         pointStrokeColor: "#fff",

         pointHighlightFill: "#fff",

         pointHighlightStroke: "rgba(70,191,189,1)"

         },

         {

         label: "My Second dataset",

         fillColor: "rgba(253,180,92,0.2)",

         strokeColor: "rgba(253,180,92,1)",

         pointColor: "rgba(253,180,92,1)",

         pointStrokeColor: "#fff",

         pointHighlightFill: "#fff",

         pointHighlightStroke: "rgba(253,180,92,1)"

         },

             {

                 label: "My Second dataset",

                 fillColor: "rgba(128,206,69,0.2)",

                 strokeColor: "rgba(128,206,69,1)",

                 pointColor: "rgba(128,206,69,1)",

                 pointStrokeColor: "#fff",

                 pointHighlightFill: "#fff",

                 pointHighlightStroke: "rgba(128,206,69,1)"

             }

         ];

         $scope.labels = [];

         $scope.series=[];

         $scope.data = [];

         $scope.lineDeptName="";//总加班工时提示

         //{"OvertimeDate":"2014-10-01--2014-12-31","DeptID":"100145","DeptName":"信用卡室","LineID":"990283",

         // "LineName":"数据中心","OvertimeHours":"1517.1000000000001","AvgHoursByDept":"1471.01","AvgHoursByEmp":"114.33"}

         var lineDeptNameValue=0;

         var OvertimeHoursData = [];

         var AvgHoursData = [];

         var AvgHoursByEmpData = [];

         for(var i= 0;i<pData.length;i++)

         {

         $scope.labels.push(pData[i].DeptName);

         OvertimeHoursData.push(parseInt(pData[i].OvertimeHours));

         AvgHoursData.push(parseInt(pData[i].AvgHoursByDept));

         AvgHoursByEmpData.push(parseInt(pData[i].AvgHoursByEmp));

         lineDeptNameValue+=Number(pData[i].OvertimeHours);

        if(i==0)

         {

         $scope.lineDeptName=pData[i].LineName;

     /*    $scope.lineDeptName=pData[i].LineName;

         $scope.series.push(pData[i].LineName+'加班(小时)');

         $scope.series.push(pData[i].LineName+'平均加班(小时)')*/;

         }

         }

        $scope.series.push('室组总计(小时)');

        $scope.series.push('室组平均(小时)');

        $scope.series.push('个人平均(小时)');



         $scope.data.push(OvertimeHoursData);

         $scope.data.push(AvgHoursData);

         $scope.data.push(AvgHoursByEmpData);



         $scope.lineDeptName+='加班总工时：'+lineDeptNameValue+'小时';



    }

View Code