Chart.js 教程绘制曲线图(Line chart)

Chart.js特性

1、6种图表类型

Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。

    ◆ 曲线图(Line charts)
    ◆ 柱状图(Bar charts)
    ◆ 雷达图或蛛网图(Radar charts)
    ◆ 饼图(Pie charts)
    ◆ 极地区域图(Polar area charts)
    ◆ 环形图(Doughnut charts)

2、基于HTML5

Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案。

3、简单、灵活

Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法。

引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

  1. <script src="Chart.js"></script>

创建图表

为了创建图表,我们要实例化一个Chart对象。为了完成前面的步骤,首先需要需要传入一个绘制图表的2d context。以下是案例。
Html:

  1. <canvas id="myChart" width="400" height="400"></canvas>

Javascript:

  1. //Get the context of the canvas element we want to select
  2. var ctx = document.getElementById("myChart").getContext("2d");
  3. var myNewChart = new Chart(ctx).PolarArea(data);

我们还可以用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点,然后在这个DOM节点上调用 getContext("2d") 方法。
Javascript:

  1. //Get context with jQuery - using jQuery's .get() method.
  2. var ctx = $("#myChart").get(0).getContext("2d");
  3. //This will get the first returned node in the jQuery collection.
  4. var myNewChart = new Chart(ctx);

当我们完成了在指定的canvas上实例化Chart对象之后,Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后,我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中,我们将展示如何绘制一幅极地区域图(Polar area chart)。
Javascript:

  1. new Chart(ctx).PolarArea(data,options);

曲线图(Line chart)

简介

曲线图就是将数据标于曲线上的一种图表。

一般用于展示趋势数据,和比较两组数据集。

使用案例

chart

Javascript:

  1. new Chart(ctx).Line(data,options);

数据结构

Javascript:

  1. var data = {
  2. 	labels : ["January","February","March","April","May","June","July"],
  3. 	datasets : [
  4. 		{
  5. 			fillColor : "rgba(220,220,220,0.5)",
  6. 			strokeColor : "rgba(220,220,220,1)",
  7. 			pointColor : "rgba(220,220,220,1)",
  8. 			pointStrokeColor : "#fff",
  9. 			data : [65,59,90,81,56,55,40]
  10. 		},
  11. 		{
  12. 			fillColor : "rgba(151,187,205,0.5)",
  13. 			strokeColor : "rgba(151,187,205,1)",
  14. 			pointColor : "rgba(151,187,205,1)",
  15. 			pointStrokeColor : "#fff",
  16. 			data : [28,48,40,19,96,27,100]
  17. 		}
  18. 	]
  19. }

图表参数

Javascript:

  1. Line.defaults = {
  2.  
  3. 	//Boolean - If we show the scale above the chart data			
  4. 	scaleOverlay : false,
  5.  
  6. 	//Boolean - If we want to override with a hard coded scale
  7. 	scaleOverride : false,
  8.  
  9. 	//** Required if scaleOverride is true **
  10. 	//Number - The number of steps in a hard coded scale
  11. 	scaleSteps : null,
  12. 	//Number - The value jump in the hard coded scale
  13. 	scaleStepWidth : null,
  14. 	//Number - The scale starting value
  15. 	scaleStartValue : null,
  16.  
  17. 	//String - Colour of the scale line	
  18. 	scaleLineColor : "rgba(0,0,0,.1)",
  19.  
  20. 	//Number - Pixel width of the scale line	
  21. 	scaleLineWidth : 1,
  22.  
  23. 	//Boolean - Whether to show labels on the scale	
  24. 	scaleShowLabels : false,
  25.  
  26. 	//Interpolated JS string - can access value
  27. 	scaleLabel : "<%=value%>",
  28.  
  29. 	//String - Scale label font declaration for the scale label
  30. 	scaleFontFamily : "'Arial'",
  31.  
  32. 	//Number - Scale label font size in pixels	
  33. 	scaleFontSize : 12,
  34.  
  35. 	//String - Scale label font weight style	
  36. 	scaleFontStyle : "normal",
  37.  
  38. 	//String - Scale label font colour	
  39. 	scaleFontColor : "#666",	
  40.  
  41. 	///Boolean - Whether grid lines are shown across the chart
  42. 	scaleShowGridLines : true,
  43.  
  44. 	//String - Colour of the grid lines
  45. 	scaleGridLineColor : "rgba(0,0,0,.05)",
  46.  
  47. 	//Number - Width of the grid lines
  48. 	scaleGridLineWidth : 1,	
  49.  
  50. 	//Boolean - Whether the line is curved between points
  51. 	bezierCurve : true,
  52.  
  53. 	//Boolean - Whether to show a dot for each point
  54. 	pointDot : true,
  55.  
  56. 	//Number - Radius of each point dot in pixels
  57. 	pointDotRadius : 3,
  58.  
  59. 	//Number - Pixel width of point dot stroke
  60. 	pointDotStrokeWidth : 1,
  61.  
  62. 	//Boolean - Whether to show a stroke for datasets
  63. 	datasetStroke : true,
  64.  
  65. 	//Number - Pixel width of dataset stroke
  66. 	datasetStrokeWidth : 2,
  67.  
  68. 	//Boolean - Whether to fill the dataset with a colour
  69. 	datasetFill : true,
  70.  
  71. 	//Boolean - Whether to animate the chart
  72. 	animation : true,
  73.  
  74. 	//Number - Number of animation steps
  75. 	animationSteps : 60,
  76.  
  77. 	//String - Animation easing effect
  78. 	animationEasing : "easeOutQuart",
  79.  
  80. 	//Function - Fires when the animation is complete
  81. 	onAnimationComplete : null
  82.  
  83. }

发布日期:

所属分类: JavaScript/jquery 标签: