Question

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

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

Answer 1

您可以使用Google条形图实现此目的，请参见以下示例：

 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

Answer 2

在我看来，

Google图表答案也更有效。但是，如果要显示引导进度条，则可以通过两种方法进行。如果您已经生成了两个值，则可以直接在进度条样式中直接将其回显，如下所示：

  <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库。

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

2 个答案: