Google Charts Gauge

Question

大多数图表仪表似乎只支持0的起始值（min）。

我们需要将起始值设为最小值和结束值为min，以便将针最大化为最小值。

E.g。 将该量表视为前20位开发人员的排名，下面的例子是您被评为3号。

＆＃13;

＆＃13;

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Rank', 20 - 3]
  ]);
  var options = {
    width: 250,
    height: 250,
    redFrom: 0,
    redTo: 10,
    yellowFrom: 10,
    yellowTo: 15,
    greenFrom: 15,
    greenTo: 20,
    minorTicks: 20,
    max: 20,
    min: 0,
    majorTicks: ['20', '1']
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);

}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>

<div id="chart_div" style="width: 400px; height: 400px;"></div>

＆＃13;

＆＃13;

＆＃13;

但问题是，因为测量仪真的不支持这个我有点黑客它按照我想要的方式工作。一切都很好，除了一件事。你会注意到底部的值是17，因为这个hack：

['Rank', 20-3]

我可以写一行jquery来替换svg结果中的这个值吗？

任何帮助都将不胜感激。

Answer 1

更改选项和数据：

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Rank', 3]
]);

var options = {
width: 250,
height: 250,
redFrom: 20,
redTo: 10,
yellowFrom: 10,
yellowTo: 5,
greenFrom: 5,
greenTo: 0,
minorTicks: 20,
max: 0,
min: 20,
majorTicks: ['20', '1']
  };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);

}

https://jsfiddle.net/mblenton/xasppevj/