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 ...

随机推荐

Facebook React完全解析
2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...
JavaScript高级引用类型（一）《JavaScript高级程序设计（第三版）》
引用类型是一种数据结构.它也被称作类.有时也被称作对象的定义. 对象是某个特定引用类型的实例. 一.Object类型表达式上下文(expression context):指能够返回一个值语 ...
移植u-boot-1.1.6之NOR的支持
u-boot-1.1.6里面默认配置文件里面支持的nor型号是 #if 0 #define CONFIG_AMD_LV400 1 /* uncomment this if you have a LV4 ...
调试工具-fiddler
本地资源替换线上调试 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html ...
MongoDB 3 + Windows 7 X64安装及配置
注册windows服务,使MongoDB自动启动 1.使用系统管理员运行cmd C:\Users\admin> d: C:\Users\admin> cd "mongodb的安装 ...
Java实现猜数游戏
利用Math.random()方法产生1~100的随机整数,利用JOptionPane.showInputDialog()方法产生一个输入对话框,用户可以输入所猜的数.若所猜的数比随机生成的数大,则显 ...
UltraEdit20 注册
UltraEdit v20下载与注册机 UltraEdit是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII 码.HTML.PHP.Perl.Java 和 JavaScript等众多流行计 ...
Laravel 5 基础（九）- 表单
首先让我们修改路由,能够增加一个文章的发布. Route::get('articles/create', 'ArticlesController@create'); 然后修改控制器 public fu ...
做个伪IE浏览器？！【来自官网】
原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 选择File ...
delphi常用函数过程
数据类型转化 1.1. 数值和字符串转化 Procedure Str(X [: Width [ : Decimals ]]; var S); 将数值X按照一定格式转化成字符串S.Wid ...

chart.js图表库案例赏析，饼图添加文字

chart.js图表库案例赏析，饼图添加文字

chart.js图表库案例赏析，饼图添加文字的更多相关文章

随机推荐

热门专题