JS 센터 제로 게이지 차트

Question

필자가 구축 한 웹 응용 프로그램에 Highcharts를 사용하여 지금까지 훌륭하게 입증되었습니다. 하지만 지금은 다음과 같습니다 일부 데이터에 대한 계기를 만드는 임무를 봤는데 :

을 그리고 멋진 그가 채워지 (A 중심 제로화 게이지의 렌더링 수있는 차트 라이브러리를 찾을 수 없습니다 중심에서 바늘이 흔들림).

도서관이나 맞춤 구현에 대한 권장 사항이있는 사람이 있습니까?

는 (PS 내가 그것을 기반으로 할 필요가 예를 들어 게이지가 PDF 보고서, 리버스 엔지니어링 아무것도 그래서 아무 기회에서입니다) 여기

Answer 1

당신이 놀 수있는 일이다 https://jsfiddle.net/remisture/pb70kduv/5/

이가 일이 두 가지가 결합

• http://www.highcharts.com/demo/gauge-speedometer

• http://www.highcharts.com/demo/gauge-solid

  을

  $(function() { 
  var settings = { 
  gaugeMinValue : 0, 
  gaugeMaxValue : 8000, 
  gaugeStartValue : 3000, 
  gaugeStartAngle : -90, 
  gaugeEndAngle : 90, 
  gaugeUpdateInterval : 500 // ms 
  }; 
  
  var options = { 
  tooltip : { 
      enabled : false 
  }, 
  chart : { 
      type : 'gauge', 
      backgroundColor : 'rgba(255, 255, 255, 0)', 
      plotBackgroundColor : null, 
      plotBackgroundImage : null, 
      plotBorderWidth : 0, 
      plotShadow : false, 
      spacing : [5, 30, 5, 30], 
      style : { 
      fontSize : '1em' 
      } 
  }, 
  
  title : false, 
  
  pane : { 
      startAngle : settings.gaugeStartAngle, 
      endAngle : settings.gaugeEndAngle, 
      background : { 
      backgroundColor : 'rgba(255, 255, 255, 0)', 
      borderWidth : 0, 
      innerRadius : '60%', 
      outerRadius : '100%', 
      shape : 'arc' 
      } 
  }, 
  
  plotOptions : { 
      gauge : { 
      /*dial: { 
      radius: 0 
      }, 
      pivot: { 
      radius: 0 
      },*/ 
      dataLabels : { 
       borderWidth : 0, 
       padding : 0, 
       verticalAlign : 'middle', 
       style : false, 
       formatter : function() { 
       var output = '<div class="gauge-data">'; 
       output += '<span class="gauge-value">' + this.y + '</span>'; 
       output += '</div>'; 
  
       return output; 
       }, 
       useHTML : true 
      } 
      }, 
      pie : { 
      dataLabels : { 
       enabled : true, 
       distance : -10, 
       style : false 
      }, 
      startAngle : settings.gaugeStartAngle, 
      endAngle : settings.gaugeEndAngle, 
      center : ['50%', '50%'], 
      states : { 
       hover : { 
       enabled : false 
       } 
      } 
      } 
  }, 
  
  // the value axis 
  yAxis : { 
      offset : 0, 
      min : settings.gaugeMinValue, 
      max : settings.gaugeMaxValue, 
  
      title : false, 
  
      minorTickWidth : 0, 
  
      tickPixelInterval : 30, 
      tickWidth : 2, 
      tickPosition : 'outside', 
      tickLength : 14, 
      tickColor : '#ccc', 
      lineColor : '#ccc', 
      labels : { 
      distance : 28, 
      rotation : "0", 
      step : 2, 
      }, 
  
      plotBands : [{ 
      thickness : 10, 
      outerRadius : "112%", 
      from : 0, 
      to : 2500, 
      color : '#FB8585' // red 
      }, { 
      thickness : 10, 
      outerRadius : "112%", 
      from : 2500, 
      to : 5500, 
      color : '#F9E7AE' // yellow, 
      }, { 
      thickness : 10, 
      outerRadius : "112%", 
      from : 5500, 
      to : 8000, 
      color : '#83DAD9' // green 
      }] 
  }, 
  
  series : [{ 
      type : 'gauge', 
      data : [settings.gaugeStartValue], 
  }, { 
      type : 'pie', 
      innerSize : '87%', 
      data : [{ 
      y : settings.gaugeStartValue, 
      name : "", 
      color : "#0bbeba" 
      }, { 
      y : settings.gaugeMaxValue - settings.gaugeStartValue, 
      name : '', 
      color : "#666666" 
      }] 
  }], 
  
  navigation : { 
      buttonOptions : { 
      enabled : false 
      } 
  }, 
  
  credits : false 
  }; 
  
  $('#gauge1').highcharts(options, buildGraph); 
  
  function buildGraph(chart) { 
  if (!chart.renderer.forExport) { 
      setInterval(function() { 
      var gaugePoint = chart.series[0].points[0], 
       piePoint = chart.series[1], 
       newVal, 
       inc = Math.round((Math.random() - 0.5) * 1500); 
  
      newVal = gaugePoint.y + inc; 
      if (newVal < settings.gaugeMinValue || newVal > settings.gaugeMaxValue) { 
       newVal = gaugePoint.y - inc; 
      } 
  
      // Update number gauge value 
      gaugePoint.update(newVal); 
  
      // Update pie with current value 
      piePoint.points[0].update(newVal); 
      piePoint.points[1].update(settings.gaugeMaxValue - newVal); 
  
      }, settings.gaugeUpdateInterval); 
      } 
      } 
      });