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=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做报表,修改线条样式的更多相关文章
- 【译】用 Chart.js 做漂亮的响应式表单
数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...
- vue中使用chart.js
1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- vue2项目中引用外部js文件
vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...
- HTML中引用外部JS文件失效原因
今天在练习中碰到“引用外部的一个js文件但是却失效”的情况,实在不懂,百度后才知是引用的位置不对,错误的代码如下: <head> <meta charset="UTF-8& ...
- 用php脚本给html中引用的js和css路径打上版本
比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"&g ...
- js文件中引用其他js文件
这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...
- nodejs中引用其他js文件中的函数
基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...
- smbms系统中引用的js文件出现乱码
问题如下显示: 时间显示出现了乱码,找到显示该时间的js文件,定位问题出现的地方. 解决方案: 改变该文件的编码方式,这里的使用了vscode进行改变js文件的编码方式 步骤如下: 使用vscode打 ...
随机推荐
- kafka之六:为什么Kafka那么快
转自: http://mp.weixin.qq.com/s?__biz=MzIxMjAzMDA1MQ==&mid=2648945468&idx=1&sn=b622788361 ...
- 【Linux学习】Vi / Vim编辑器—编辑器工作模式、vi编辑操作
Vi / Vim编辑器-编辑器工作模式.vi编辑操作 推荐一个很好的学习指南:http://www.oschina.net/translate/learn-vim-progressively 一.编辑 ...
- react-redux升级到7.0.x后报错"TypeError: Object(...) is not a function"
同样一套代码,react-redux 6.0.x 的版本下可以正常运行,在7.0.x的版本下出现报错,而且报错原因实在太难定位了 package.json { ... "react-redu ...
- 关于 prototype与__proto__ (用到的时候再看一次 加深理解)
链接顺序: 1. https://blog.csdn.net/ligang2585116/article/details/53522741 2.https://www.jianshu.com/p/80 ...
- shell学习(7)- linux权限管理及修改权限命令chmod
文件系统权限基本介绍 1.文件基本权限 总共10个字符,可以分为四组, 第一组,就一个字符-,代表是文件类型,是一个常规文件,还有其他的类型如下所示 d--目录 l--符号链接,软连接 c--字符专门 ...
- .Net Core应用框架Util介绍(一)转
回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时. JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应 ...
- python操作json来存储简单的数据,pickle来操作复杂的数据
json作为不同语言间进行数据交互的媒介,在当下已经渐渐取代了之前的xml,看一波python操作json # coding = ascii import json import pickle imp ...
- Django的锁和事务
Django的锁和事务 锁 select_for_update(nowait=False, skip_locked=False) 返回一个锁住行直到事务结束的查询集,如果数据库支持,它将生成一个 SE ...
- jieba gensim 最好别分家之最简单的相似度实现
简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...
- [软件工程基础]2017.11.03 第七次 Scrum 会议
具体事项 项目交接燃尽图 每人工作内容 成员 已完成的工作 计划完成的工作 工作中遇到的困难 游心 #10 搭建可用的开发测试环境:#9 阅读分析 PhyLab 后端代码与文档:#8 掌握 Larav ...