JS Center-Zeroedゲージチャート

Question

私はビルドしていたWebアプリケーションにHighchartsを使用してきました。しかし、今、私はこのようになりますいくつかのデータのためのゲージを作成する使命を帯びてきた：

をそして私は素晴らしいが、それから塗りつぶし（中心ゼロ化されたゲージをレンダリングする任意のチャートライブラリを見つけることができません針が揺れているところまで）。

ライブラリやカスタム実装に関する推奨事項はありますか？

は（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); 
      } 
      } 
      });