Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
Chart.js帮你用不同的方式让你的数据变得可视化,支持6种图表类型:曲线图、柱状图、雷达图或蛛网图、饼图、极地区域图、环形图。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。
Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案。Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有50KB),并且提供了加载外部参数的方法。
引入Chart.js文件
首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。
html代码:
<script src="Chart.js"></script>
创建图表
为了创建图表,我们要实例化一个Chart对象。为了完成前面的步骤,首先需要需要传入一个绘制图表的2d context。以下是案例。
html代码:
<canvas id="myChart" width="400" height="400"></canvas>
javascript代码:
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
我们还可以用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点,然后在这个DOM节点上调用 getContext("2d") 方法。
javascript代码:
//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
当我们完成了在指定的canvas上实例化Chart对象之后,Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后,我们就可以继续创建Chart.js中提供的具体类型的图表了。
下面这个案例中,我们将展示如何绘制一幅任务多属性雷达图。
javascript代码:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: ["生活技能", "沟通表达", "金融知识", "法规常识", "异国文化"],
datasets: [
{
label: "我的属性",
fillColor: "rgba(51,153,204,0.4)",
strokeColor: "rgba(204,204,204,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [30,15,12,22,45]
}
]
};
var options = {
pointLabelFontFamily : "Microsoft YaHei,SimHei,Verdana,Arial,Helvetica,sans-serif",
pointLabelFontSize : 25
}
var myRadarChart = new Chart(ctx).Radar(data,options);