谷歌图表仪表

Question

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

我们需要将起始值设置为最大值，将结束值设置为最小值，以使针在最小值处最大化。

例如 将该指标视为对前 20 名开发人员的排名，以下示例中您被评为第 3 名。

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);

}

<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>

但问题是由于仪表确实不支持这一点，我有点破解它以按照我想要的方式工作。一切都很好，除了 1 件事。由于这个 hack，你会注意到底部的值是 17：

['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/