自定义Google Charts Gauge Blue Circle

Question

我需要自定义Google图表计量器中的蓝色圆圈。我看到google-charts建立了svg图片。有没有办法改变中心柱或量规针的颜色。

Answer 1

没有标准的配置选项，
但您可以手动更改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>

Answer 2

借助@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');
    }
  });
}