如何从两个值动态绘制引导进度条答案

【问题标题】：How to draw a bootstrap progress bar dynamically from two values如何从两个值动态绘制引导进度条
【发布时间】：2018-08-24 04:38:24
【问题描述】：

我上个月的浏览量有两个值：10000 本月浏览量：500000。

我想从这两个值中绘制一个进度条我应该使用什么公式来实现这一点？

【问题讨论】：

标签： javascript php twitter-bootstrap

【解决方案1】：

您可以使用谷歌条形图来实现这一点，请参见下面的示例：

 google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Views'],
          ['2017', 10000],
          ['2018', 500000 ]
        ]);

        var options = {
          chart: {
            title: 'Website Performance',
            subtitle: 'Views per year',
          },
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

在此处查看更多文档： https://developers.google.com/chart/interactive/docs/gallery/barchart

【讨论】：

【解决方案2】：

在我看来，谷歌图表答案也更有效。但是如果你想显示引导进度条，你可以通过两种方式做到这一点。如果您已经生成了这两个值，您可以直接在进度条样式中回显它，如下所示

  <div class="progress">
    <div class="progress-bar" id="bar_1" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $value; ?>%">
      <span class="sr-only"><?php echo $value; ?>% Complete</span>
    </div>
  </div>

但是您没有在此页面中生成它，而您想在服务器站点中生成它，您可以使用简单的 javascript 函数使用 ajax 来克服它。

   <div class="progress">
        <div class="progress-bar" id="bar_1" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:10%">
            <span class="sr-only"><span id="value_1">70</span>% Complete</span>
        </div>
    </div>
    <script>
    $(document).ready(function () {
        $.ajax({
           url: "your_php_file.php", 
           success: function (responseText) {
             $("#bar_1").css('width', responseText+'%');
             $("#value_1").html(responseText);
           }
        });
     });
    </script>

如您所见，您可以在 your_php_file.php 中计算进度值并回显它。确保你也调用 jquery 库。

【讨论】：