谷歌图表仪表盘

Question

大多数图表仪表似乎只支持起始值(min) 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>

​

但问题是，由于仪表真的不支持这一点，我有点黑它的工作方式，他们想要的。除了一件事之外，所有的工作都很好。你会注意到底部的值是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/