图表Chart.js入门教程

使用Chart.js来制作各种各样的图表。下面将为你全方位介绍chart.js。chart.js最与众不同之处是，它可以在HTML5 Canvas上面绘制出色的响应式图表。

Chart.js允许你把不同的图表类型混合在一起，然后在上面绘制日期、对数或自定义比例的数据。还可以在更改数据或更新颜色时应用运用框外动画。

下面将教你安装chart.js，然后介绍配置选项和其他的方面。

1. 安装和使用

你可以从GitHub里面下载最新版本的Chart.js或者在你的项目中使用CDN link。或者你也可以通过以下命令在npm或bower中来安装chart.js。

npm install chart.js --save
bower install chart.js --save

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。

而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。

一旦你决定好使用哪个版本之后，你就可以在你的项目中引入Chart.js了。

<script src="path/to/Chart.min.js"></script><script>var barChart = new Chart({...})
</script>

2. 创建图表

下面将以上面的人口表为例来创建条形图。Y轴表示人口数量，X轴表示国家。下面将创建一个id名为popChart的画布。

<canvas id="popChart" width="600" height="400"></canvas>

一般来说，画布的宽度和高度决定了图表的尺寸。在创建响应式图表时，宽高比由画布的宽度和高度决定。

接下来，你需要实例化Chart类。这可以通过传递要绘制图表的画布的节点，jQuery实例或2d上下文来完成。

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

接下来你需要做的就是把所有的参数传递给构造器。

var barChart = new Chart(popCanvas, {type: 'bar',data: {labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],datasets: [{label: 'Population',data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],backgroundColor: ['rgba(255, 99, 132, 0.6)','rgba(54, 162, 235, 0.6)','rgba(255, 206, 86, 0.6)','rgba(75, 192, 192, 0.6)','rgba(153, 102, 255, 0.6)','rgba(255, 159, 64, 0.6)','rgba(255, 99, 132, 0.6)','rgba(54, 162, 235, 0.6)','rgba(255, 206, 86, 0.6)','rgba(75, 192, 192, 0.6)','rgba(153, 102, 255, 0.6)']}]}
});

第二个参数传递的对象包含了Chart.js创建图表的所有信息。type键指定图表类型，可以取下列值：line, bar, radar, polarArea, pie, doughnut 以及bubble。data键包含了要用到的所有数据。background键图表的背景色。默认值是’rgba(0,0,0,0.1)’。

每个图表都有自己的特定键，你可以用它们来控制图表的外观。这张图表是上面代码最终呈现效果。

3. 配置选项
Chart.js库允许你个性化定制你的图表。例如，你可以改变上面图表的颜色和边框宽度。你还可以通过更改字体大小和颜色来修改工具提示栏和图例。在这个小节里面你将会学习到这些设置样式的键。

Chart.js库具有四个特殊的全局键，可用于更改图表中的所有字体。这些键是 defaultFontFamily, defaultFontSize, defaultFontStyle，和 defaultFontColor。字体大小以像素为单位指定，不适用于 radialLinear刻度点标签。同样， defaultFontStyle不适用于工具提示标题或页脚。

图表Chart.js入门教程相关推荐

图表Chart js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图
官网:http://www.chartjs.org/ Github:https://github.com/chartjs/Chart.js 使用方法: 1,在页面中创建一个canvas画布 < ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
js读取http chunk流_极简 Node.js入门教程双工流
点击上方蓝字关注我们小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读双工流就是同时实现了 Readab ...
Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
Chart.js入门：简介
人们通常不希望浏览大量以文本或表格形式呈现给他们的数据. 大多数情况下,这是因为它很无聊,但更重要的是,处理原始数字要困难一些. 例如,这是世界上人口最多的十个国家的表格: 国名人口中国 1,37 ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...

图表Chart.js入门教程

图表Chart.js入门教程相关推荐

最新文章

热门文章