chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析，饼图添加文字
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。
前天用了一下，由于以前也稍微用过，今天总结了一下（水平有限，如果问题，请不吝赐教）：
开发中文文档：http://www.bootcss.com/p/chart.js/docs/
chart.js下载：
把所有的图标全都写了一遍，并把所有的可控属性（颜色等）均已随机数出现，大小自己控制；
这是所有的代码，只有一个Chart.js外部文件，引来即用：
<!doctype html>
<html>
<head>
<title>Chart</title>
<mate charset="utf-8"></mate>
<script src="Chart.js"></script>
</head>
<body> <div style="width:50%;margin: 0px auto;"> <!--柱状图开始-->
<div>
<h1>柱状图（Bar chart）</h1>
<canvas id="canvas-bar" height="450" width="600"></canvas>
</div> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomScalingFactor_255 = function(){ return Math.round(Math.random()*255)};
var radom_color = function(){
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
}
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.5)",
strokeColor : "rgba(" + randomScalingFactor_255()+","+ randomScalingFactor_255()+"," + randomScalingFactor_255() + ",0.8)",
highlightFill: "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.75)",
highlightStroke: "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.5)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.8)",
highlightFill : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.75)",
highlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
] }
var ctx = document.getElementById("canvas-bar").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
</script>
<!--柱状图结束--> <!--曲线图（Line chart）开始-->
<div>
<h1>曲线图（Line chart）</h1>
<canvas id="canvas-line" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointStrokeColor : radom_color(),
pointHighlightFill : radom_color(),
pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointStrokeColor : radom_color(),
pointHighlightFill : radom_color(),
pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My First dataset",
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.3)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
] }
var ctx = document.getElementById("canvas-line").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
})
</script> <!--曲线图（Line chart）结束--> <!--雷达图或蛛网图（Radar chart）开始-->
<div>
<h1>雷达图或蛛网图（Radar chart）</h1>
<canvas id="canvas-radar" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var radarData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}, ] }
var ctx = document.getElementById("canvas-radar").getContext("2d");
window.myLine = new Chart(ctx).Radar(radarData, {
responsive: true
})
</script>
<!--雷达图或蛛网图（Radar chart）结束--> <!--极地区域图（Polar area chart）开始-->
<div>
<h1>极地区域图（Polar area chart）</h1>
<canvas id="canvas-polar" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var polarData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
} ];
var ctx = document.getElementById("canvas-polar").getContext("2d");
window.myLine = new Chart(ctx).PolarArea(polarData, {
responsive: true
})
</script>
<!--极地区域图（Polar area chart）结束--> <!--饼图（Pie chart）开始-->
<div>
<h1>饼图（Pie chart）</h1>
<canvas id="chart-pie" width="450" height="450"/>
</div>
<script> var pieData = [
{
value: 300,
color: radom_color(),
highlight: radom_color(),
label: "Red" },
{
value: 200,
color: radom_color(),
highlight: radom_color(),
label: "Green"
},
{
value: 100,
color: radom_color(),
highlight: radom_color(),
label: "Yellow"
},
{
value: 400,
color: radom_color(),
highlight: radom_color(),
label: "Grey"
},
{
value: 120,
color: radom_color(),
highlight: radom_color(),
label: "Dark Grey"
}
];
var ctx = document.getElementById("chart-pie").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);
</script> <!--饼图（Pie chart）结束-->
<!--环形图（Doughnut chart）开始-->
<div style="width: 600px;height:600px;">
<h1>环形图（Doughnut chart）</h1>
<canvas id="chart-Doughnut" width="300" height="300"/>
</div>
<script>
var doughnutData = [
{
value: 1,
label: "One",
color:radom_color()
},
{
value: 2,
label: "Two",
color:radom_color()
},
{
value: 3,
label: "Three",
color:radom_color()
},
{
value: 4,
label: "Four",
color:radom_color()
},
{
value: 5,
label: "Five",
color:radom_color()
} ]; var ctx = document.getElementById("chart-Doughnut").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
</script>
<!--环形图（Doughnut chart）结束--> </div> </body>
</html>
项目需要在饼图上写字（最后没用），找到了一个高手改过源码之后的文件：http://download.csdn.net/detail/renfufei/7102809
具体做法：
饼状图,添加文字
1. 修改的是 Chart.js,大致在 772行 编码,也可以搜索 renfufei@qq.com
2. 示例是 samples/pie.html,使用的是 UTF-8编码
--
var pieData = [
{
value: 30,
color:"#F38630"
,text: "男生"
},
{
value : 50,
color : "#E0E4CC"
,text: "女生"
},
{
value : 100,
color : "#69D2E7"
,text: "男人"
} ];
--
chart.js可以完成功能，但是对于项目中的特殊需求并不能很好的实现~
chart.js图表库案例赏析，饼图添加文字的更多相关文章
- 手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款
Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- php 使用GD库压缩图片，添加文字图片水印
先上一个工具类,提供了压缩,添加文字.图片水印等方法: image.class.php <?php class Image { private $info; private $image; pu ...
- 可能是史上最强大的js图表库——ECharts带你入门
PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...
- 史上最强大的js图表库——ECharts带你入门(转)
出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...
- 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)
官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...
- Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
http://www.hcharts.cn/index.php 暂无介绍,等待后续补充
- hcharts中文网 一个js图表库
http://www.bossidc.com/info/gongju/2013/0717/2133.html hcharts源码包下载 http://www.hcharts.cn/demo/hig ...
随机推荐
- mysql触发器关联表更新
mysql> create table voteItem -> ( -> id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -> titl ...
- 软件工程 speedsnail 冲刺3
2015-5-7 完成任务:环境崩溃,重新配置环境,学习了黑马android教学视频前6集: 遇到问题: 问题1 Error: Error parsing C:\Users\sam\.android\ ...
- sql 基本操作
SQL基本操作 一数据类型1整数型 int2精确数值型 decimal(n,p)n为总位数,p为小数位数3浮点型 float4字符型char(n)n最大为4,varchar(n)5日期型datat ...
- c#中操作word文档-一、模板方式写入
转载自:http://blog.csdn.net/fujie724/article/details/5443322 适合模板写入 今天正好有人问我,怎么生成一个报表式的Word文档. 就是文字的样式和 ...
- MongoDb gridfs-ngnix文件存储方案 - 图片
http://www.cnblogs.com/wintersun/p/4622205.html 在各类系统应用服务端开发中,我们经常会遇到文件存储的问题. 常见的磁盘文件系统,DBMS传统文件流存储. ...
- 史上最全Vim快捷键键位图（入门到进阶）
经典版 下面这个键位图应该是大家最常看见的经典版了. 对应的简体中文版 其实经典版是一系列的入门教程键位图的组合结果,下面是不同编辑模式下的键位图. 入门版 基本操作的入门版. 进阶版 增强版 下图是 ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- php教程一，变量
php是一种动态脚本语言,比较适合web开发. php支持8种变量数据类型: 四种标量类型: boolean(布尔型) integer(整型) float(浮点型,也称作 double) string ...
- 【easyui】—easyui教你编写一个前台的架子
以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使 ...
- C基础 那些年用过的奇巧淫技
引言 - 为寻一颗明星 为要寻一颗明星 徐志摩 1924年12月1日<晨报六周年纪念增刊> 我骑著一匹拐腿的瞎马, 向著黑夜里加鞭:—— 向著黑夜里加鞭, 我跨著一匹拐腿的瞎马.// 我冲 ...