JS 中心归零仪表图

Question

我一直在将 Highcharts 用于我一直在构建的 Web 应用程序，并且到目前为止证明它们很棒。但现在我的任务是为一些数据创建一个仪表，如下所示：

而且我找不到任何图表库可以很好地呈现居中归零仪表（从中心填充到指针摆动的位置）。

有人对库或自定义实现有任何建议吗？

(P.S。我需要作为其基础的示例量规来自 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);
  }
  }
  });

JS 中心归零仪表图

JS Centre-Zeroed Gauge Chart

javascript

charts

highcharts

gauge