如何在Google Visualization Gauge中删除最小值和最大值

问题描述 投票:1回答:1

我正在尝试从Google可视化仪表中删除最小值和最大值(0和100)。我设法删除了主值,但没有删除最小值和最大值。有想法吗?

       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Studio / T1', {v:90, f:''}],
    ['T2', {v:90, f:''}],
  ]);
        var options = {
          width: 400, height: 160,
          redFrom: 66.66, redTo: 100,
          redColor: "#cf1717",
          yellowFrom:33.33, yellowTo: 66.66,
          yellowColor: "#f7e031",
          greenFrom:0, greenTo:33.33,
          greenColor: "#168200",
          minorTicks: 5
        };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gauge(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
      if (circle.getAttribute('fill') === '#4684ee') {
        circle.setAttribute('fill', '#4c96d7');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {

      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#c4996b');
        path.setAttribute('fill', '#c4996b');
      }
    });
  });
  chart.draw(data, options);

});

    </script>
charts google-visualization gauge
1个回答
0
投票

您可以为[]选项提供一个空数组majorTicks ...

majorTicks: []

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Studio / T1', {v:90, f:''}],
    ['T2', {v:90, f:''}],
  ]);
  var options = {
    width: 400, height: 160,
    redFrom: 66.66, redTo: 100,
    redColor: "#cf1717",
    yellowFrom:33.33, yellowTo: 66.66,
    yellowColor: "#f7e031",
    greenFrom:0, greenTo:33.33,
    greenColor: "#168200",
    majorTicks: [],
    minorTicks: 5
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gauge(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
      if (circle.getAttribute('fill') === '#4684ee') {
        circle.setAttribute('fill', '#4c96d7');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#c4996b');
        path.setAttribute('fill', '#c4996b');
      }
    });
  });
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
© www.soinside.com 2019 - 2024. All rights reserved.