在折线图中显示mysql数据库中的数据

ippsafx7  于 2021-06-18  发布在  Mysql
关注(0)|答案(2)|浏览(514)

我试图用折线图显示mysql表中的数据。x轴代表职员姓名,y轴代表身份证号码。我遇到了一个问题,字符串(员工姓名)没有显示在x轴上,它只显示数值。到目前为止,我尝试的代码是:

  1. <?php
  2. $dataPoints = array();
  3. try{
  4. $link = new PDO('mysql:host=localhost;dbname=aa', 'root', '');
  5. $handle = $link->prepare('select * from staff');
  6. $handle->execute();
  7. $result = $handle->fetchAll(PDO::FETCH_OBJ);
  8. foreach($result as $row){
  9. array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id));
  10. }
  11. $link = null;
  12. }
  13. catch(PDOException $ex){
  14. print($ex->getMessage());
  15. }
  16. ?>
  17. <!DOCTYPE HTML>
  18. <html>
  19. <head>
  20. <script>
  21. window.onload = function () {
  22. var chart = new CanvasJS.Chart("chartContainer", {
  23. animationEnabled: true,
  24. exportEnabled: true,
  25. theme: "light1",
  26. title:{
  27. text: "PHP Column Chart from Database"
  28. },
  29. xaxis
  30. data: [{
  31. type: "line", //change type to bar, line, area, pie, etc
  32. yValueFormatString: "$#,##0K",
  33. indexLabel: "{y}",
  34. indexLabelPlacement: "inside",
  35. indexLabelFontWeight: "bolder",
  36. indexLabelFontColor: "white",
  37. dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
  38. }]
  39. });
  40. chart.render();
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <center><div id="chartContainer" style="height: 370px; width: 50%;"></div></center>
  46. <script src="https://canvasjs.com/assets/script/canvasjs.min.js">
  47. </script>
  48. </body>
  49. </html>
f2uvfpb9

f2uvfpb91#

如果你看到关于canvasjs datapoint属性x的文档,只接受数字值,你应该使用label。试着改变

  1. array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id));

  1. array_push($dataPoints, array("label"=> $row->Name, "y"=> $row->id));
enxuqcxy

enxuqcxy2#

x值可以是数字或日期时间值。但在你的情况下,这似乎是一个字符串。在您的案例中,可以使用轴标签,而不是x值。

  1. array_push($dataPoints, array("label"=> $row->Name, "y"=> $row->id));

相关问题