是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
6种图表类型
Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。
Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。
简单、灵活
Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法。
曲线图（Line charts）
Line graphs are probably the most widely used graph for showing trends.
Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.
柱状图（Bar charts）
Bar graphs are also great at showing trend data.
Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.
雷达图或蛛网图（Radar charts）
Radar charts are good for comparing a selection of different pieces of data.
Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.
饼图（Pie charts）
Pie charts are great at comparing proportions within a single data set.
Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.
极地区域图（Polar area charts）
Polar area charts are similar to pie charts, but the variable isn't the circumference of the segment, but the radius of it.
Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.
环形图（Doughnut charts）
Similar to pie charts, doughnut charts are great for showing proportional data.
Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.
Like what you see?
A project by
Chart.js由翻译整理Bootstrap Chart组件使用教程
作者：贤勇
字体：[ ] 类型：转载 时间：
图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的，不过功能上差不多能满足我们项目的需要，本文给大家介绍Bootstrap Chart组件使用，需要的朋友参考下吧
Bootstrap是由前Twitter设计师Mark Otto和Jacob Thornton开发的前端工具包，其提供了优雅的HTML和CSS规范。Bootstrap不单单是一个框架，更确切的说，它改变了整个游戏规则。该框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。
图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的，不过功能上差不多能满足我们项目的需要。下面这段JS脚本主要是为了方便生成一个图表的配置而写的方法
* 获取一个新的chart配置项
* @param color rgba颜色
* @param type 图表类型:line,bar,radar,polarArea,pie,doughnut
* @param title 显示图表的标题
* @param label 图表的标签，鼠标移到图表某个数据点时显示的提示文字
* @param categories 一般是X轴的内容
* @param data 一般是Y轴的数据
* @returns 返回图表的配置参数
function getNewConfig(color,type,title,label,categories,data)
var background =
var config = {
type: type,
options: {
responsive: true,
display: false,
position:'bottom'
mode: 'label'
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
display: true,
text: title
var dataset = {
label: label,
data: data,
fill: false,
borderDash: [, ],
borderColor : background,
backgroundColor : background,
pointBorderColor : background,
pointBackgroundColor : background,
pointBorderWidth :
var data = {
labels:categories,
datasets: [dataset]
config.data =
&canvas id="chart_weixinmember" height=""&&/canvas&
var color = 'rgba(,,,.)';
var categories = ["--","--","--","--","--","--","--"];
var data = [,,,,,,];
var config = getNewConfig(color,'line','最近天微信会员增长情况','当天新增微信会员',categories,data);
var ctx = document.getElementById("chart_weixinmember").getContext("d");
var weixinMemberCountChart = new Chart(ctx, config);
显示的效果：
说明：使用上面的代码需要引用Chart.js,
Chart中文网站以及文档:
Chart英文网站及文档：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的Bootstrap Chart.js后台动态数据前台显示不出来，求教！！！
[问题点数：20分]
Bootstrap Chart.js后台动态数据前台显示不出来，求教！！！
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
要回复问题请先或
一句话介绍
浏览: 1662
关注: 1 人}