码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-27 17:56:05      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:

目前还有个问题,在手机上看,当折线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

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

标签:

原文地址:http://www.cnblogs.com/Zive/p/4253483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!