Google 图表仪表

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>

但问题是因为仪表真的不支持这个我有点黑了它按照我想要的方式工作。除了一件事，一切都很好。由于这个 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/

Google 图表仪表

Google Charts Gauge

javascript

jquery

charts

svg

google-visualization