<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 数据 图表插件的更多相关文章

  1. 数据图表插件echarts(二)

    前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...

  2. 数据图表插件Echarts(一)

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  3. Echarts数据图表插件--开源、大气、强大

    个人觉得不错,分享给大家. 教程地址:http://echarts.baidu.com/, 开源项目:https://github.com/ecomfe/echarts

  4. 大数据-图表插件-echarts 样式修改(迭代)

    修改折线图大小   myChart.setOption({             title:{                     text:"价格指数"          ...

  5. canvas的Chart图表插件

    今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件 官网:http://www.bootcss.com/p/chart.js/         里面会有下载js文件和中文文档 ...

  6. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  7. 实时更新数据的jQuery图表插件DEMO演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  9. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

随机推荐

  1. TFS2018 linux Agent的安装

    1. 感谢徐蕾老师的文档,根据文档简单学会了TFS agent的安装,在此简单记录一下: 前置条件: CentOS7.4 or CentOS7.5的版本 安装的软件有git 2.17 dotnet s ...

  2. 转帖: Serverless架构模式简介

    Serverless架构模式简介   原贴地址:https://blog.csdn.net/chdhust/article/details/71250099?utm_medium=referral&a ...

  3. Node 多页面请求

    //功能:创建web服务器接收客户请求// http://127.0.0.1:8080/index 准备// http://127.0.0.1:8080/news 准备// public/index. ...

  4. Java之List使用方法

    package basic; import java.util.ArrayList; import java.util.Arrays; import java.util.Iterator; impor ...

  5. ceph S3客户端操作--s3cmd

    S3 client 访问ceph rgw 安装: yum install s3cmd 验证安装是否成功: $s3cmd --version s3cmd version 1.5.2 #表示安装成功 在c ...

  6. BZOJ3718[PA2014]Parking——树状数组

    题目描述 你的老板命令你将停车场里的车移动成他想要的样子.停车场是一个长条矩形,宽度为w.我们以其左下角顶点为原点,坐标轴平行于矩形的边,建立直角坐标系.停车场很长,我们可以认为它一直向右边伸展到无穷 ...

  7. P3312 [SDOI2014]数表

    啊啊啊我昨天怎么没写题解wwww 补昨日题解... 题目链接 : https://www.luogu.org/problemnew/show/P3312 也是莫反 我要把fft留到今天写 [和zyn小 ...

  8. 自学Linux Shell5.2-shell内建命令history alias

    点击返回 自学Linux命令行与Shell脚本之路 5.2-shell内建命令history alias 外部命令:有时称为文件系统命令,是存在于bash shell之外的程序,通常位于/bin./u ...

  9. 【BZOJ2285】[SDOI2011]保密(分数规划,网络流)

    [BZOJ2285][SDOI2011]保密(分数规划,网络流) 题面 BZOJ 洛谷 题解 首先先读懂题目到底在干什么. 发现要求的是一个比值的最小值,二分这个最小值\(k\),把边权转换成\(t- ...

  10. Elasticsearch中使用groovy脚本处理boolean字段的一个问题

    Elasticsearch中使用groovy脚本获取文档的bool字段值时,得到的值是字符的 'T' 或者 'F' ,而不是bool值 true 和 false . 比如文档中有一个字段是 { &qu ...