Настроить Google Charts Gauge Blue Circle

Question

Мне нужно настроить синий круг из Google Chart Chrome. Я вижу, что Google-чарты создает изображение SVG. Есть ли способ изменить цвет центральной точки или иглы датчика.

Answer 1

Благодаря @WhiteHat, я смог изменить синий центр по умолчанию.Я использую модуль angular-google-charts и, используя идею @WhiteHat, настроил «ненастраиваемый» по конфигурации синий кружок:

HTML:

              <google-chart             
              [type]="'Gauge'" 
              [data] ="gaugeSales" 
              [options]="gaugeOptions" 
              [dynamicResize]="'true'"
              (ready)="this.customizeGauge()"
              >

TS

customizeGauge()
{ 
  Array.prototype.forEach.call(document.getElementsByTagName('circle'), function(circle) {
    if (circle.getAttribute('fill') === '#4684ee') {
      circle.setAttribute('fill', '#5e35b1');
    }
  });
}

Answer 2

нет стандартных параметров конфигурации,
но вы можете вручную изменить svg,
на графике 'ready' событие

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var options = {
    width: 400, height: 120,
    redFrom: 90, redTo: 100,
    yellowFrom:75, yellowTo: 90,
    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', '#5e35b1');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#00bcd4');
        path.setAttribute('fill', '#00bcd4');
      }
    });
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>