最新案例

Chart.js实现HTML5任务多属性雷达图显示

发表日期:2016-08-07 文章来源:

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);

 

点击下载 Chart.js