javascript - 如何从两个值动态绘制 Bootstrap 进度条

标签 javascript php twitter-bootstrap

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

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

最佳答案

您可以使用 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

关于javascript - 如何从两个值动态绘制 Bootstrap 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51997566/

相关文章:

php - 尝试将 HTTP_REFERER 写入referer.txt 但它不起作用

javascript - 如何让 Highchart 填满整个 bootstrap 窗口?

css - Bootstrap 3 仅在小屏幕上更改 div 顺序

twitter-bootstrap - 在每个选项卡中使用 will_paginate 分页 Bootstrap 导航选项卡

php - 我在 Windows 8 上安装了 Xampp。当我尝试在 XAMPP 控制面板中启动 MySql 时,出现以下消息,并且 MySql 无法启动

javascript - 在 CRM 2011 的 Web 资源中出现错误对象不支持属性或方法 'setSrc'

javascript - 使用 $ ('img[src$="变量中的图像源结束字符串选择图像"]') 得到未定义的值

javascript - 在自定义框模式中滚动到​​顶部

javascript - IE8 XmlHttpRequest调试

php - 使用 Laravel Sanctum 获取用户数据