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

angulajs中引用chart.js做报表,修改线条样式的更多相关文章

  1. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

  2. vue中使用chart.js

    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...

  3. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  4. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  5. HTML中引用外部JS文件失效原因

    今天在练习中碰到“引用外部的一个js文件但是却失效”的情况,实在不懂,百度后才知是引用的位置不对,错误的代码如下: <head> <meta charset="UTF-8& ...

  6. 用php脚本给html中引用的js和css路径打上版本

    比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"&g ...

  7. js文件中引用其他js文件

    这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...

  8. nodejs中引用其他js文件中的函数

    基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...

  9. smbms系统中引用的js文件出现乱码

    问题如下显示: 时间显示出现了乱码,找到显示该时间的js文件,定位问题出现的地方. 解决方案: 改变该文件的编码方式,这里的使用了vscode进行改变js文件的编码方式 步骤如下: 使用vscode打 ...

随机推荐

  1. ceph与openstack对接(cinder、glance、nova)

    对接分为三种,也就是存储为openstack提供的三类功能1.云盘,就好比我们新加的硬盘2.原本的镜像也放在ceph里,但是我没有选择这种方式,原因是因为后期有要求,但是我会把这个也写出来,大家自己对 ...

  2. 在windows64位的系统上面操作操作excel程序出现异常

    1.把iis的网站程序引用池启用32位设置 2.把iis的网站程序引用池启用中标识修改为LocalSystem 2.代开cmd 输入mmc -32 添加组件服务在dcom组件中找到excel安全里添加 ...

  3. 爬虫库之BeautifulSoup学习(三)

    遍历文档树: 1.查找子节点 .contents tag的.content属性可以将tag的子节点以列表的方式输出. print soup.body.contents print type(soup. ...

  4. Visual Studio 2010下WorldWind编译问题集合

    首先:获取WORLDWIND最新代码——建议不要直接下载源代码包进行编译,一是因为它并不是最新版本的代码,WW的代码最近经常更新:二是缺很多依赖的类库.建议用TortoiseSVN客户端从source ...

  5. JSBridge框架解决通信问题实现移动端跨平台开发

    一.跨平台开发是趋势 目前主流的移动端平台主要是Android和iOS,为了尽可能复用代码和节省开发成本,各大巨头都开发了自己的跨平台框架,比如Facebook的React-Native.阿里的Wee ...

  6. 模板 - 数据结构 - ST表 + 二维ST表

    区间最大值,$O(nlogn)$ 预处理,$O(1)$ 查询,不能动态修改.在查询次数M显著大于元素数量N的时候看得出差距. 令 $f[i][j]$ 表示 $[i,i+2^j-1]$ 的最大值. 显然 ...

  7. TP5之发送邮件

    1.下载扩展,vendor\phpmailer 文件结构: 2.话不多说,上代码    注意点: ·   需要提前开通对应邮箱的SMTP服务 ·  $mail->Host = "  & ...

  8. bzoj 4873: [Shoi2017]寿司餐厅【最大权闭合子图】

    有正负收益,考虑最小割 因为有依赖关系,所以考虑最大权闭合子图 首先对每个d[i][j]建个点,正权连(s,id[i][j],d[i][j])并加到ans上,负权连(id[i][j],t,-d[i][ ...

  9. Nginx 405 not allowed最简单快速解决办法

    Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误. server { list ...

  10. ZooKeeper-3.3.4集群安装配置(转载)

    ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命名服务(Naming S ...