一、Chart.js 概述
Chart.js 简介
- Chart.js 是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库
- 官方地址: http://www.chartjs.org/
Chart.js 特点
- 基于 HTML 5
- Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器，并且针对IE7/8提供了降级替代方案
- 简单、灵活
- Chart.js 不依赖任何外部工具库，轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法
Chart.js 功能
- Chart.js 帮你用不同的方式让你的数据变得可视化
- 每种类型的图表都有动画效果，并且看上去非常棒，即便在retina屏幕上
- 六种图表类型
- 曲线图
- 柱状图
- 雷达图
- 饼状图
- 级地区域图
- 环形图
二、Chart.js 入门
Chart.js 特点
- 在 HTML页面中引入Chart.js文件
<script src="Chart.js"></script>
- 创建 <canvas> 元素
- 用于显示Chart图表的容器
<canvas id="myChart" width="400" height="400"></canvas>
- 获取Canvas对象
- document.getElementById("mycChart").getContext("2d");
- 创建Chart图表
- new Chart(ctx).PolarArea(data);
Chart.js 全局配置
- Chart.js 全局配置在 chart.js 第一个正式版本中引入
- Chart.js 全局配置用于改变所有图表的类型，避免了需要在每一个图表中单独进行设置
- 当然，Chart.js 全局配置也可以专门为某一个特定的图表进行配置
- 语法:
Chart.defaults.global.参数名 = 参数值;
- 举例:
Chart.defaults.global.responsave = true;
创建指定图表时responsave选项值为true
三、Chart.js 使用
曲线图
- 曲线图
- 就是将多个数据点绘制在一条线上
- 通常被用于展示趋势的数据或两组数据之间的对比
- 方法
- new Chart(ctx).Line(data,options);
- data:用于设置曲线上的数据、样式及名称
- options: 选项，用于配置曲线图
柱状图
- 柱状图
- 就是使用柱状方式显示数据的一种方式
- 通常被用于展示趋势的数据或多组数据之间比较
- 方法
- new Chart(ctx).Bar(data,options);
- data:用于设置柱状图上的数据、样式及名称
- options: 选项，用于配置柱状图
饼状图
- 饼状图
- 可能是所有图表中最为常用的一种
- 就是将一个圆划分成若干个部分，每个弧形展示每个数据的比例值
- 通常被用于展示多组数据之间的比例
- 方法
- new Chart(ctx).Pie(data,options);
- data:用于设置饼状图上的数据、样式及名称
- options: 选项，用于配置饼状图
雷达图
- 雷达图
- 就是一种展示多个数据点以及它们之间变化的方式
- 通常被用于比较点的两个或多个不同的数据集
- 方法
- new Chart(ctx).Radar(data,options);
- data:用于设置雷达图上的数据、样式及名称
- options: 选项，用于配置雷达图
极地区域图
- 极地区域图
- 类似于饼状图，但每一个扇形的角度和半径取决于不同的值
- 通常被用于需要展示类似于饼状图的比较数据的基础上，还需要展示范围值的比较
- 方法
- new Chart(ctx).PolarArea(data,options);
- data:用于设置极地区域图数据、样式及名称
- options: 选项，用于配置极地区域图
环形图
- 环形图
- 类似于饼状图，但环形图是一个空心的环形形状
- 通常被用于展示多组数据之间关系的比例
- 方法
- new Chart(ctx).Doughnut(data,options);
- data:用于设置环形图数据、样式及名称
- options: 选项，用于配置环形图
总结：本章内容主要介绍了下 HTML5 Chart.js(概述、入门、使用)
本文出自 “技术交流” 博客，谢绝转载！
Html5之高级-7 HTML5 Chart.js(概述、入门、使用)
原文地址：http://jasonteach.blog.51cto.com/5192112/1758342
