首页 > 代码库 > angulajs中引用chart.js做报表,修改线条样式
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>
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=http://www.mamicode.com/0; var OvertimeHoursData =http://www.mamicode.com/ []; var AvgHoursData =http://www.mamicode.com/ []; var AvgHoursByEmpData =http://www.mamicode.com/ []; 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+‘小时‘; }
angulajs中引用chart.js做报表,修改线条样式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。