Chart.js 使用示例

叁歲伎倆 2022-06-16 08:45 137阅读 0赞

从[MySQL][] [ 数据库][MySQL]中获取数据 ，利用chart.js 绘制柱形图。

文件结构：

![Center][]

1.index.[PHP][]文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名label和value，以符合chart.js中绘制图形时需要的数据格式。执行sql语句后，把结果以json格式返回。代码如下：

**\[html\]** [view plain][] [copy][view plain]

1.  **<****span**style="font-size:18px;"**>****<?****php**
2.  //数据库配置 
3.  $dbconf= array( 
4.   'host'=**>**'127.0.0.1', 
5.   'user'=**>**'root', 
6.   'password'=**>**'123456',//因为测试，我就不设置密码，实际开发中，必须建立新的用户并设置密码 
7.   'dbName'=**>**'exercisedata', 
8.   'charSet'=**>**'utf8', 
9.   'port'=**>**'3306' ); 
10. function openDb($dbConf)\{ $conn=mysqli\_connect($dbConf\['host'\],$dbConf\['user'\],$dbConf\['password'\],$dbConf\['dbName'\],$dbConf\['port'\]) or die('打开失败'); 
11.  //当然如上面不填写数据库也可通过mysqli\_select($conn,$dbConf\['dbName'\])来选择数据库 
12.  mysqli\_set\_charset($conn,$dbConf\['charSet'\]);//设置编码 
13.  return $conn; 
14. \} 
15. $conn=openDb($dbconf); 
16. //2query方法执行增、查、删、改 
17. $sql='SELECT userName as \`label\`, score as \`value\` FROM exercisedata.users'; 
18. /\*\*\*\*\*\*\*\*\*\*\*\*\*数据查询\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/ 
19. $rs=$conn-**>**query($sql); 
20. 
21. $data=array();//保存数据 
22. while($tmp=mysqli\_fetch\_assoc($rs))\{//每次从结果集中取出一行数据 
23.  $data\[\]=$tmp; 
24. \} 
25. //对数据进行相应的操作 
26.  echo json\_encode($data);**</****span****>**

数据库中的users

![Center 1][]

访问http://localhost/test/php/index.php 得到如下结果：

![Center 2][]

则说明数据库连接成功。

2.index.html文件。在**<script>****</script>**中引入Chart.js库、index.js文件, Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。在body标签中添加一个canvas标签，用来显示可视化柱形图。代码如下：

**\[html\]** [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**
2.  **<****html**lang="zh-cn"**>**
3.  
4.  **<****head****>**
5.  **<****meta**http-equiv="Content-Type"charset="UTF-8"**/>**
6.  **<****title****>**案例显示**</****title****>**
7.  
8.  
9.  
10. **<****style**type="text/css"**>**
11.  \* 
12. \{ 
13.  margin: 0px; 
14.  padding: 0px; 
15. \} 
16. 
17. body 
18. \{ 
19.  background: \#EEE; 
20.  text-align:center; 
21. \} 
22. 
23. \#drawCanvas 
24. \{ 
25.  background: white; 
26.  border: 1px solid \#CCC; 
27. \} 
28. **</****style****>**
29. **</****head****>**
30. 
31. **<****body****>**
32. **<****script**type="text/javascript"src="../js/Chart.js"**>****</****script****>**
33. **<****script**type="text/javascript"src="../js/jquery-1.11.1.min.js"**>****</****script****>**
34. **<****script**type="text/javascript"src="../js/index.js"**>****</****script****>**
35. **<****p****>**A班成绩表**</****p****>**
36. **<****canvas**id="myChart"width="600"height="400"**>****</****canvas****>**
37. **</****body****>**
38. 
39. **</****html****>**

3.index.js文件。写一个用来画图的js函数bar，有一个参数Data，然后编写getdatafromDB 函数用ajax 获取php文件中的数据data，并调用bar方法，在window.onload函数中调用getdatafromDB函数。 bar函数分为两部分：一部分数据设置，一部分为显示样式设置。

**\[html\]** [view plain][] [copy][view plain]

1.  window.onload=function() 
2.  \{ 
3.   getdatafromDB(); 
4.  \} 
5.  
6.  var getdatafromDB = function()\{ 
7.   $.ajax(\{ 
8.   url: "../php/index.php", 
9.   type: "POST", 
10.  dataType:"json", 
11.  error: function()\{ 
12.  alert('Error loading XML document'); 
13.  \}, 
14.  success:function(data)\{ 
15.  console.info(data); 
16.  bar(data); 
17.  \} 
18.  \}); 
19. \} 
20. function bar(Data) 
21. \{ 
22.  if(Data.length==null || Data.length == 0) 
23.  return; 
24.  var barData=\{\}; 
25. barData.labels=\[\]; 
26. barData.datasets=\[\]; 
27.  var temData=\{\}; 
28. temData.data=\[\]; 
29. temData.fillColor= "rgba(151,187,205,0.5)"; 
30. temData.strokeColor = "rgba(151,187,205,0.8)"; 
31. temData.highlightFill="rgba(151,187,205,0.75)", 
32. temData.highlightStroke= "rgba(151,187,205,1)"; 
33. 
34.  for(var i=0;i**<****Data.length**;i++) 
35.  \{ 
36.  barData.labels.push(Data\[i\].label); 
37.  temData.data.push(Data\[i\].value); 
38.  \} 
39.  barData.datasets.push(temData); //封装一个规定格式的barData。 
40.  console.info(barData); 
41.  / /// 动画效果 
42.  var options = \{ 
43.  scaleOverlay: false, 
44.  scaleOverride: false, 
45.  scaleSteps: null, 
46.  scaleStepWidth: null, 
47.  scaleStartValue: null, 
48.  scaleLineColor: "rgba(0,0,0,.1)", 
49.  scaleLineWidth: 1, 
50.  scaleShowLabels: true, 
51.  scaleLabel: "**<**%=value%**>**", 
52.  scaleFontFamily: "'Arial'", 
53.  scaleFontSize: 12, 
54.  scaleFontStyle: "normal", 
55.  scaleFontColor: "\#666", 
56.  scaleShowGridLines: true, 
57.  scaleGridLineColor: "rgba(0,0,0,.05)", 
58.  scaleGridLineWidth: 1, 
59.  bezierCurve: true, 
60.  pointDot: true, 
61.  pointDotRadius: 3, 
62.  pointDotStrokeWidth: 1, 
63.  datasetStroke: true, 
64.  datasetStrokeWidth: 2, 
65.  datasetFill: true, 
66.  animation: true, 
67.  animationSteps: 60, 
68.  animationEasing: "easeOutQuart", 
69.  onAnimationComplete: null 
70.  \} 
71.  var ctx = document.getElementById("myChart").getContext('2d'); 
72. myChart = new Chart(ctx).Bar(barData,options, \{ //重点在这里 
73.  responsive : true 
74.  \}); 
75. \}

访问[http://localhost/test/html/index.html][http_localhost_test_html_index.html] [测试][Link 1]结果如下：

![Center 3][]

[MySQL]: http://lib.csdn.net/base/mysql
[Center]: /images/20220616/f7810554b5314fec90fc5e65039e5046.png
[PHP]: http://lib.csdn.net/base/php
[view plain]: http://blog.csdn.net/u013993319/article/details/51249653#
[Center 1]: /images/20220616/9632c4f88b8042328c558c7348c63fea.png
[Center 2]: /images/20220616/0f9b4eb7ae57434087a787c2389f4a0b.png
[http_localhost_test_html_index.html]: http://localhost/test/html/index.html
[Link 1]: http://lib.csdn.net/base/softwaretest
[Center 3]: /images/20220616/80c5799d081f4feeb8adfe8ec8c50e0f.png