Question

我在html中使用表单来获取两个值的计算输入，并将它们显示为饼图（简单的饼图）。它似乎工作正常，但它无法更新饼图内的值，这些值旨在显示计算结果并将其描绘为图表。所以我需要找到如何在饼图中显示值的方法。这是一个代码：

以下是我获取输入的表单：

`<div class="row">
     <form class=" span6 calculator-form form-horizontal">
        <div class="control-group">
           <label class="control-label" for="dist">Distance</label>
              <div class="controls">
                 <input type="text" class="span4" required name="dist" id="dist" placeholder="Distance in killometrs">
              </div>
           </div>

        <div class="control-group">
           <label class="control-label" for="ton">Weight</label>
              <div class="controls">
                 <input type="text" class="span4" name="ton" id="ton" placeholder="Weight in tonnes">
              </div>
           </div>

        <div class="control-group">
              <div class="controls">
                 <button type="submit" id="calculate" class="red-btn med-btn pull-right" value="Calculate">Calculate</button>
              </div>
          </div>

   </div>
  </div>
  </form>`

以下是显示eay-pie-chart的代码：

<span class="chart" id="char1"  data-percent="0">
       <span class="percent"></span>
</span>

这里我根据表格中的输入计算值：

<script type="text/javascript">
            $(document).ready(function() {
              $('#calculate').click(function() {
                dist = $('#dist').val();
                ton = $('#ton').val();

                totaltruck1 = (ton/20)*(dist*5);
                totalrail1 = (ton/60)*(dist*4)+900;

                totaltruck2 = (ton/18)*(dist*6);    
                totalrail2 = (ton/68)*(dist*2)+100;

                answer1 = Math.round((totaltruck1-totalrail1)/totaltruck1*100);
                answer2 = Math.round((totaltruck2-totalrail2)/totaltruck2*100);

                $('#char1').data('easyPieChart').update(answer1);
                $('#char2').data('easyPieChart').update(answer2);

              });
            });
          </script>

以下是我更新图表以显示计算值的方法。图表工作正常，但它没有显示图表中的值：

<script src="js/jquery.easy-pie-chart.js"></script>

        <script type="text/javascript">
        $(function() {
            $('#char1').easyPieChart({
                //your configuration goes here
                animate: 1000,
                size: 200,
                lineWidth: 9,
                barColor: '#fe4236',
                easing: 'easeOutBounce',
                onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
                }
            });
           </script>

问题本身很简单。如何显示我在网站（即HERE）上以文本形式计算的结果（answer1和answer2）

如何在easy-pie-chart中显示计算结果

0 个答案: