Chart.js（图表绘制工具库）――HTML5
id="myChart" width="400" height="400">>
　　javascript部分：
　　引入Chart.js文件;
　　创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化);
　　实例化Chart对象后就继续创建具体类型的图表了;
曲线图（Line chart）：
id="myChart" width="600" height="400">>
javascript：(引入及两种使用方式)
src="js/Chart.min.js">>1 type="text/javascript">
var ctx = document.getElementById("myChart").getContext("2d");;
var MyNewChart = new Chart(ctx).Line(data);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [10, 59, 90, 81, 56, 55, 40]
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
>1234567891011121314151617181920212223242526
数据结构：
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [10, 59, 90, 81, 56, 55, 40]
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
1234567891011121314151617181920
图标参数：
Line.defaults = {
scaleOverlay : false,
scaleOverride : false,
scaleSteps : null,
scaleStepWidth : 20,
scaleStartValue : null,
scaleLineColor: "rgba(0,0,0,.1)",
scaleLineWidth: 1,
scaleShowLabels: true,
scaleLabel: "",
scaleFontFamily: "'Arial'",
scaleFontSize: 16,
scaleFontStyle: "normal",
scaleFontColor: "#666",
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth:2,
bezierCurve: true,
pointDot: true,
pointDotRadius:5,
pointDotStrokeWidth: 2,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'　　图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和
应用和项目的可靠性。
　　在这篇文章中，我们收集了35款值得网站开发者收藏的
图形图表库，适合各种图表需求。其中大部分都是免费而且开源的，希望大家能在下面的列表中找到适合自己需求的 JavaScript 图表和图形库。
您可能感兴趣的相关文章
1. JS Charts
JS Charts&是个基于
的图表生成器，不需要任何编码。JS Charts 非常容易使用，只要用户使用客户端脚本（比如，在 web 浏览器中执行）。它不需要多余的插件和服务器模块，只需要下载 JS Charts 的脚本，准备好 XML，JSON 或者 JavaScript 数组数据。
2. Canvasjs
CanvasJS&是个易用的
& JavaScript 图表库，基于 Canvas 元素。Graphs 可以通过设备渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允许用户创建适用于所有设备，不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度&&生成轻量级，漂亮和响应式的仪表图。
3. Chart.js
Chart.js&是个简单的，面向对象的客户端图形库，用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的，完全自定义，而且看起来非常好看，即使在 retina 显示。它使用
canvas 元素，支持所有现代浏览器，并且支持& IE7/8。
4. Aristochart
Aristochart&是个高度自定义，灵活的折线
图表库，允许用户集中精力在图表的审美方面，后台工作做得非常好。Aristochart 有个持续进步的社区，提供许多不断增长的主题给用户选择。
5. xCharts
xCharts&是一个使用&D3.js&来构建漂亮的可定制的数据驱动的
图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。
6. BonsaiJS
BonsaiJS&是个轻量级的
图形库，提供直观的图形 API 和 SVG 渲染器。主要特性包括：架构分离的运行器和渲染器；iFrame，Worker 和 Node 运行上下文；形状，路径，Assets（音频，图像，字体，subMovies），Keyframe 和常规动画，等等。支持现代化浏览器： Safari, Chrome 和 Firefox。
7. Sigma.js
Sigma.js&是个免费开源的 t 图形库，使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。
8. Morris.js
Morris.js&是个轻量级的
库，使用 jQuery 和 Rapha&enuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有：& IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一个函数： Morris.Line(选项)，包括了许多配置选项。
9. Paper.js
Paper.js&是一个开源的向量图形脚本框架，基于
Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。
10. AmCharts
AmCharts&是个高级图表库，适用于所有数据的可视化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。
11. Smoothie Charts
Smoothie Charts是个极小的图表库，专为实时流媒体数据设计的。Joe Walnes 想展示
推动的实时的流数据。虽然很多图表库允许用户动态更新数据，但是没有一个是可以优化源源不断的流数据。
12. Dygraphs
Dygraphs&是个快速，灵活，开源的
图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表；可以修改数值或者点击条目来调整平均周期。
13. Grafico
Grafico&是 Grafico 是一个基于&Rapha&l&和&Prototype.js&构建的 JavaScript 图表库，提供了各种图表类型。这些漂亮的图表，有利于传递他们的信息。
14. Highchart JS
Highcharts&JS 是一个制作图表的纯
类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等；对个人用户完全免 费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用。
Flotr&是一个基于 Prototype 开发的
绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。
Flot&是受&Plotr&和&PlotKit&的 启发，Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
17. jFreeChart
JFreeChart&&主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久，而且有大量的开发者在维护。
18. Plotkit
PlotKit&是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档，方便用户使用。
19. Planetary.js
Planetary.js&是个令人称奇的创建交互式 web 地球仪的
库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构，甚至默认自身就是个插件！这使得 Planetary.js 非常灵活，而且它是允许用户完全自定义，包括颜色，大小，rotation 等等。更重要的是，用户可以在任意位置使用自定义的颜色和大小来显示动画&pings&；它还支持鼠标拖动和缩放，100% 免费和开源。
20. Ember Charts
Ember Charts&是个图表库，使用&Ember.js&和&d3.js&框架构建的。它包括时间线，条形图，饼图和散点图，非常容易扩展和修改。这些图表组件都是开箱即用的，在图表交互和演示方面应用的很好。
21. Sparky
Sparky&是个免费的 JavaScript 波形图库，依赖于 Rapha&l ，非常容易使用。支持多个图表类型（折线，条形，area），折线和区域图可以有多个颜色选择。
22. Envision.js
Envision.js&是个 JavaScript 库，用来简化，快速创建交互式的 HTML5 可视化图表。它包括两个图表类型：时序图和 Finance ，提供 API 给开发者，用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关，依赖于几个小的 JavaScript 库。
dc.js&是个 JavaScript 图表库，有着原生的&crossfilter， 支持和允许高效展示大型多维数据集（基于 crossfilter 的示例）；图表使用 dc.js 渲染，是使用原生数据驱动，所以能得到用户的实时反馈；dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库，能进行数据可视化和分析；不仅支持桌面浏览器还支持移动端。
24. ElyCharts
Elycharts&是一个易于使用的，可定制的
图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括：line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括：鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域，Tooltip，HTML锚点等。可以动 态修改数据，并以漂亮的动画效果展示图表中的变化。图表利用SVG/VML技术生成，基于jQuery + Rapha&l开发。
25. AwesomeChartJS
AwesomeChartJS&Awesome Chart JS 是一个
生成图表的类库，它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量，使用它只需书写几行代码便能生成漂亮的图表。
26. Arbor.js
Arbor.js&是一个利用 Web Works 和&&创建的可视化图形库，它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。
27. CanvasXpress
canvasXpress&是一个基于HTML5 canvas标签实现的 t 图表类库，它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强，鼠标放 上去时会动态显示值。除此之外，它也具有相当高的可定制性，可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是，虽然它使用了 HTML5，但是依然支持IE6浏览器。
28. JSXGraph
JSXGraph&是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。
29. Rickshaw
Rickshaw&是一个用于绘制时序图的简单 jS 库，基于&Mike Bostock&s delightful D3 库构建。
30. rGraph
RGraph&是基于HTML5 canvas标签的HTML5 canvas图形库，支持 20 种不同的可视化类型。使用 canvas 标签，RGraph 创建&HTML5 图表&，意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小，低能耗和更快的浏览速度。
31. Fusion Chart
FusionCharts&Suite XT 是个专业的
图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的 legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。
32. Graph Dracula
Dracula&是用一系列的工具来显示和布局互动图表，包括各种相关的算法。它只是纯 JavaScript 和 SVG ，并无 Flash，Java，其他插件。它非常容易使用，用户可以很简单的自定义任意的元素。
Bluff 是个 JavaScript 的 Ruby 的&&端口。它支持所有 Gruff 的特性，但是有着最小的依赖。用户只需要运行一个第三方脚本：&副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本，用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。
34. Pizza Pie Chart
Pizza Pie Charts&是个响应式饼图图表，基于 Adobe Snap SVG 框架，通过 HTML 标记和 CSS 来替代 JavaScript 对象，更容易集成各种先进的技术。
35. jGraph
HTML5 图表组件，完全支持l IE 6-8 和触屏设备。&JGraph&自2001年来就一直提供最先进的图表软件组件，是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发&mxGraph。
您可能感兴趣的相关文章
英文链接：
译文链接：
阅读(...) 评论()Chart.js 使用示例
从MySql 数据库中获取数据 ，利用chart.js 绘制柱形图。文件结构：1.index.php文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名label和value，以符合chart.js中绘制图形时需要的数据格式。执行sql语句后，把结果以json格式返回。代码如下：&span style=&font-size:18&& &?php//数据库配置$dbconf= array(
'host'=&'127.0.0.1',
'user'=&'root',
'password'=&';,//因为测试，我就不设置密码，实际开发中，必须建立新的用户并设置密码
'dbName'=&'exercisedata',
'charSet'=&'utf8',
'port'=&'3306' );function openDb($dbConf){
$conn=mysqli_connect($dbConf['host'],$dbConf['user'],$dbConf['password'],$dbConf['dbName'],$dbConf['port']) or die('打开失败');
//当然如上面不填写数据库也可通过mysqli_select($conn,$dbConf['dbName'])来选择数据库
mysqli_set_charset($conn,$dbConf['charSet']);//设置编码
} $conn=openDb($dbconf);
//2query方法执行增、查、删、改
$sql='SELECT userName as `label`, score as `value` FROM exercisedata.users';
/*************数据查询***************************/
$rs=$conn-&query($sql);$data=array();//保存数据
while($tmp=mysqli_fetch_assoc($rs)){//每次从结果集中取出一行数据
//对数据进行相应的操作
json_encode($data);&/span&数据库中的users访问http://localhost/test/php/index.php 得到如下结果：则说明数据库连接成功。&2.index.html文件。在&script&&/script&中引入Chart.js库、index.js文件, Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。在body标签中添加一个canvas标签，用来显示可视化柱形图。代码如下：&!DOCTYPE html&&html lang=&zh-cn&&&head&
&meta http-equiv=&Content-Type& charset=&UTF-8& /&
&title&案例显示&/title&
&link rel=&stylesheet& href=&../css/ranking.css& /& --&&style type=&text/css&& *{
padding: 0}body{
background: #EEE;
text-align:}#drawCanvas{
background:
border: 1px solid #CCC;}&/style&&/head&&body&
&script type=&text/javascript& src=&../js/Chart.js&&&/script&
&script type=&text/javascript& src=&../js/jquery-1.11.1.min.js&&&/script&
&script type=&text/javascript& src=&../js/index.js&&&/script&
&p&A班成绩表&/p&
&canvas id=&myChart& width=&600& height=&400&&&/canvas&&/body&&/html&3.index.js文件。写一个用来画图的js函数bar，有一个参数Data，然后编写getdatafromDB 函数用ajax 获取php文件中的数据data，并调用bar方法，在window.onload函数中调用getdatafromDB函数。 bar函数分为两部分：一部分数据设置，一部分为显示样式设置。
window.onload=function(){
getdatafromDB();}var getdatafromDB = function(){ $.ajax({
url: &../php/index.php&,
type: &POST&,
dataType:&json&,
error: function(){
alert('Error loading XML document');
success:function(data){
bar(data);
});}function bar(Data){
if(Data.length==null || Data.length == 0)
var barData={};
barData.labels=[];
barData.datasets=[];
var temData={};
temData.data=[];
temData.fillColor= &rgba(151,187,205,0.5)&;
temData.strokeColor = &rgba(151,187,205,0.8)&;
temData.highlightFill=&rgba(151,187,205,0.75)&,
temData.highlightStroke= &rgba(151,187,205,1)&;
for(var i=0;i&Data.i++)
barData.labels.push(Data[i].label);
temData.data.push(Data[i].value);
barData.datasets.push(temData); //封装一个规定格式的barData。
(barData);
/// 动画效果
var options = {
scaleOverlay: false,
scaleOverride: false,
scaleSteps: null,
scaleStepWidth: null,
scaleStartValue: null,
scaleLineColor: &rgba(0,0,0,.1)&,
scaleLineWidth: 1,
scaleShowLabels: true,
scaleLabel: &&%=value%&&,
scaleFontFamily: &'Arial'&,
scaleFontSize: 12,
scaleFontStyle: &normal&,
scaleFontColor: &#666&,
scaleShowGridLines: true,
scaleGridLineColor: &rgba(0,0,0,.05)&,
scaleGridLineWidth: 1,
bezierCurve: true,
pointDot: true,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
animation: true,
animationSteps: 60,
animationEasing: &easeOutQuart&,
onAnimationComplete: null
= document.getElementById(&myChart&).getContext('2d');
myChart = new Chart(ctx).Bar(barData,options, { //重点在这里
responsive : true
});}访问http://localhost/test/html/index.html 测试结果如下：
最新教程周点击榜
微信扫一扫