Question

我正在尝试使用php为mysql中的数据创建一个条形图。我使用bootstrap模板来创建应用程序。我有预定义的静态数据条形图。我想从数据库中添加数据。我尽我所能但找不到解决方案，因为我是初学Javascript。请指导我动态添加数据。脚本如下：

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           
           </style>
           </head>
           <body>
            <nav class="navbar navbar-inverse navbar-fixed-top  ">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <img classs="img-responsive" width="130px" height="" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg">
    </a>
    <a class="navbar-brand" href="">
      <span class="glyphicon glyphicon-home"></span> | MEGA SERIES  </a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="">Series</a></li>
  </ul>
</nav>
  </body>
  </html>

＆＃13;

 // Bar chart
      var ctx = document.getElementById("mybarChart");
      var mybarChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [{
            label: '# of Votes',
            backgroundColor: "#26B99A",
            data: [10, 20, 30, 40, 20, 10, 40]
          }, {
            label: '# of Votes',
            backgroundColor: "#03586A",
            data: [41, 56, 25, 48, 72, 34, 12]
          }]
        },

        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });

＆＃13;

Answer 1

如果我了解环境，你就有php制作的网页。如果是这样，我会：

创建.php文件
编写一些PHP代码以连接到数据库并检索包含要绘制数据的数组
复制您的JS代码，包含在<script> </script>标记中，并将其包装在JS函数中，稍后您将在页面中调用

在JS代码中，在数据集之后，编写一个php循环：

// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    <?php
    if (count($arrayOfData) > 0){
       echo "label: '# of Votes',";
       echo "backgroundColor: '#26B99A',";
       echo "data: [";
       $firstValue = true;
       foreach ($arrayOfData as $dataValue) {
           if ( ! $firstValue ) {
              echo ", ".$dataValue;
           } else {
              $firstValue = false;
           }
           echo $dataValue;
       }
       echo "]";
    } else {
       //Decide what to do if you don't have data
    }
    ?>
  }]
}'

编写HTML / PHP页面的其余部分。

请注意，如果您想在图表中使用超过1个条形图，则还必须循环浏览不同的数据集，而不仅仅是为了简单起见，而不仅仅是上面显示的数据集。

如何使用php在Script中动态传递值以生成图形

1 个答案: