chart 数据 图表插件
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
拆线示例:
<canvas id="chart_trade" height=""></canvas>
<script>
var lineChartData = {
labels: ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10", "D11", "D12", "D13", "D14","D15", "D16", "D17", "D18", "D19", "D20", "D21","D22", "D23", "D24", "D25", "D26", "D27", "D28"],
datasets: [{
fillColor: "rgba(151,187,205,0)",
strokeColor: "rgba(255,0,0,1)",
pointColor: "rgba(255,0,0,1)",
data: [, , , , , , , , , , , , , , , , , , , , , , , , , , , ]
}, {
fillColor: "rgba(220,220,220,0)",
strokeColor: "rgba(255,133,27,1)",
pointColor: "rgba(255,133,27,1)",
data: [, , , , , , ,, , , , , , ,, , , , , , ,, , , , , , ]
}, {
fillColor: "rgba(151,187,205,0)",
strokeColor: "rgba(120,192,110,1)",
pointColor: "rgba(120,192,110,1)",
data: [, , , , ,, ,, , , , , , ,, , , , , , ,, , , , , , ]
}
]}; var ctx = document.getElementById("chart_trade").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
animation : true,// 是否执行动画
animationEasing : 'easeOutBounce',// 动画的特效
animationSteps : ,// 动画的时间
tooltipYPadding : ,//鼠标经过tip背景padding值
tooltipCornerRadius : ,//鼠标经过tip背景圆角
tooltipTitleFontStyle : 'Arial',//鼠标经过tip字体
pointDot : false,// 是否显示点数
scaleShowVerticalLines: false,
bezierCurve: true,//是否要曲线
pointDotRadius: ,//数值点的大小
tooltipFillColor : 'rgba(0,0,0,0.6)',//鼠标经过tip背景
scaleLineColor : '#666',//轴线颜色
scaleGridLineColor: '#ddd',//网格线颜色
scaleFontSize : ,//轴标字体大小
scaleFontFamily : "'Arial'",
responsive: true//大小自适应
});
</script>
饼图示例:
<canvas id="chart_loss"></canvas>
<script>
var pieChartData = [
{
value: ,
color:"#ff851b"
},
{
value : ,
color : "#ff4141"
}
];
var ctx = document.getElementById("chart_loss").getContext("2d");
var LineChartDemo = new Chart(ctx).Pie(pieChartData);
</script>
才下配置可在纵坐标上带亿单位
scaleLabel : "<%=value/100000000%>亿",
以上可在纵坐标上显示亿
https://www.oschina.net/question/151271_243108
示例: http://web.jobbole.com/83760/
阿里图表:
http://antv.alipay.com/g2-mobile/demo/02-line/line.html
chart 数据 图表插件的更多相关文章
- 数据图表插件echarts(二)
前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...
- 数据图表插件Echarts(一)
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- Echarts数据图表插件--开源、大气、强大
个人觉得不错,分享给大家. 教程地址:http://echarts.baidu.com/, 开源项目:https://github.com/ecomfe/echarts
- 大数据-图表插件-echarts 样式修改(迭代)
修改折线图大小 myChart.setOption({ title:{ text:"价格指数" ...
- canvas的Chart图表插件
今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件 官网:http://www.bootcss.com/p/chart.js/ 里面会有下载js文件和中文文档 ...
- 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
- 实时更新数据的jQuery图表插件DEMO演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
- 基于html5 canvas 的强大图表插件【Chart.js】
名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...
随机推荐
- spring cloud实战与思考(四) JWT之Token主动失效
需求: JWT泄露.密码重置等场景下,需要将未过期但是已经不安全的JWT主动失效. 本文不再复述JWT的基础知识,不了解的小伙伴可以自行Google一下.这里主要是针对以上需求聊一聊解决方案.如果服务 ...
- Lodop打印二维码内容长度不同如何大小相同
利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- java离线地图web GIS制作
因为项目需求,要做一个web地图,之前做过高德的在线地图,它提供了一系列的API,并且由于是国产的,所以开发起来比较容易,现在由于项目是内网使用的,所以需要使用离线地图,由此便开始了: Web GIS ...
- 闭包自由变量引用对象的问题 http://bbs.pythontab.com/thread-4266-1-1.html
- VMware下Centos7快速搭建vsftpd
最简单快捷的实现ftp的功能,不考虑安全问题. 1.配置防火墙和selinux vi /etc/selinux/config # This file controls the state of SEL ...
- 学习Spring Boot:(二十七)Spring Boot 2.0 中使用 Actuator
前言 主要是完成微服务的监控,完成监控治理.可以查看微服务间的数据处理和调用,当它们之间出现了异常,就可以快速定位到出现问题的地方. springboot - version: 2.0 正文 依赖 m ...
- 【BZOJ2299】[HAOI2011]向量(数论)
[BZOJ2299][HAOI2011]向量(数论) 题面 BZOJ 洛谷 题解 首先如果我们的向量的系数假装可以是负数,那么不难发现真正有用的向量只有\(4\)个,我们把它列出来.\((a,b)(a ...
- React Native——组件FlatList
属性 添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件 简单使用: //ES6之前写法 _header = function () { return ( &l ...
- 搭建gulp脚手架
前段时间刚好在开发公司的首页,使用的是gulp工作流,gulp相对于webpack而言,配置简单,也更加直观(很符合直觉),日常开发一些静态页面.html5专题也足够,这里把遇到的坑与实践经验记录一下 ...