目前还有个问题,在手机上看,当折线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=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+'小时'; }