Как сохранить спидометр высоких частот в радиусе действия

Я работаю на динамически загруженном спидометре. Помимо моих проблем с вызовами Ajax в сочетании со спидометром, я не могу удержать «иглу» в пределах диапазона (0-20). Целочисленный вывод показывает число меньше или больше 20, так как игла вращается за 0 или 20 в неправильном направлении. Я хотел бы сохранить его вправо от 0 и слева от 20. Мой код:Как сохранить спидометр высоких частот в радиусе действия

<!DOCTYPE HTML> 
<html> 
     <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8" > 
       <title>Tribble Inc Sales Meter</title> 

       <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
       <script type="text/javascript"> 
$(function() { 

    var chart = new Highcharts.Chart({ 

      chart: { 
       renderTo: 'container', 
       type: 'gauge', 
       plotBackgroundColor: null, 
       plotBackgroundImage: null, 
       plotBorderWidth: 0, 
       plotShadow: false 
      }, 

      title: { 
       text: 'Sales-O-Meter' 
      }, 

      pane: { 
       startAngle: -150, 
       endAngle: 150, 
       background: [{ 
        backgroundColor: { 
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
         stops: [ 
          [0, '#FFF'], 
          [1, '#333'] 
         ] 
        }, 
        borderWidth: 0, 
        outerRadius: '109%' 
       }, { 
        backgroundColor: { 
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
         stops: [ 
          [0, '#333'], 
          [1, '#FFF'] 
         ] 
        }, 
        borderWidth: 1, 
        outerRadius: '107%' 
       }, { 
        // default background 
       }, { 
        backgroundColor: '#DDD', 
        borderWidth: 0, 
        outerRadius: '105%', 
        innerRadius: '103%' 
       }] 
      }, 

      // the value axis 
      yAxis: { 
       min: 0, 
       max: 20, 

       minorTickInterval: 'auto', 
       minorTickWidth: 1, 
       minorTickLength: 10, 
       minorTickPosition: 'inside', 
       minorTickColor: '#666', 

       tickPixelInterval: 20, 
       tickWidth: 2, 
       tickPosition: 'inside', 
       tickLength: 1, 
       tickColor: '#666', 
       labels: { 
        step: 2, 
        rotation: 'auto' 
       }, 
       title: { 
        text: 'sales/min' 
       }, 
       plotBands: [{ 
        from: 0, 
        to: 4, 
        color: '#DF5353' // green 
       }, { 
        from: 4, 
        to: 8, 
        color: '#DDDF0D' // yellow 
       }, { 
        from: 8, 
        to: 20, 
        color: '#55BF3B' // red 
       }] 
      }, 

      series: [{ 
       name: 'Speed', 
       data: [18], 
       tooltip: { 
        valueSuffix: ' km/h' 
       } 
      }] 

     }, 
     // Add some life 
     function (chart) { 
      setInterval(function() { 
       var point = chart.series[0].points[0], 
        newVal, 
        inc = Math.floor((Math.random() - 1) * 20); 

       newVal = point.y + inc; 
       if (newVal < 0 || newVal > 20) { 
        newVal = point.y - inc; 
       } 

       point.update(newVal); 

      }, 3000); 
     }); 
}); 
       </script> 
     </head> 
     <body> 
<script src="highcharts.js"></script> 
<script src="highcharts-more.js"></script> 
<!--<script src="exporting.js"></script>--> 

<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div> 

     </body> 
</html>

Я не совсем уверен, что я делаю неправильно ... возможно, функции Math.Floor() выключен, но я так не думаю. Может кто-нибудь помочь?

источник

2013-03-16 Psyllex

    inc = Math.floor((Math.random() - 1) * 20); 

      newVal = point.y + inc; 
      if (newVal < 0 || newVal > 20) { 
       newVal = point.y - inc;

Этот код создает отрицательное вкл, добавляет его к точке, что делает точку отрицательным, а затем вычитает его, чтобы указать, что делает пункт более позитивным. Это происходит неправильно, потому что inc может быть больше точки.

Алгоритм, который вам нужен, зависит от того, как вы хотите, чтобы график менялся. Если вы хотите, чтобы игла искажалась, тогда создайте меньшую инк, добавьте ее в точку, а затем проверите ее.

    inc = (Math.random() * 2.0)-1.0; 

      newVal = point.y + inc; 
      if (newVal < 0 || newVal > 20) { 
       newVal = point.y - inc;

источник

2013-03-16 07:35:42 SteveP

Thanks Steve. Я нашел ответ, как они изначально сделали код. Я не использовал Math.round ((Math.random() -.5) * 20). Это округляет его до целого числа и держит его тиканием между 0-20 или любым другим. – Psyllex

Как сохранить спидометр высоких частот в радиусе действия

ответ

Смежные вопросы