如何更改angular-google-charts仪表图的针颜色？

Question

I want to change the needle color of gauge chart. I am using the following code to produce this gauge chart

 @ViewChild('googlechart', {static: true}) googlechart: GoogleChartComponent; public gaugeChart: { type: string; data: (string | { v: number; f: string })[][]; options: { width: number; height: number; greenFrom: number; greenTo: number; redFrom: number; redTo: number; yellowFrom: number; yellowTo: number; minorTicks: number; majorTicks: string[] } } = { type: 'Gauge', data: [ ['Water', {v: 78, f: '78%'}] ], options: { width: 500, height: 500, greenFrom: 50, greenTo: 100, redFrom: 0, redTo: 20, yellowFrom: 20, yellowTo: 50, minorTicks: 10, majorTicks: ['0%', '100%'] } };

Here needle color is red. I want to make it blue or green. How can I do it?

Answer 1

Suppose we r going to show plan vs actual data from SQL database by using PHP Here $total_act is the actual value from SQL chart_div is my HTML div ID

google.charts.load('current', {'packages': ['gauge']}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['TOTAL', {v: <?php print_r($total_act); ?>, f: '<?php print_r($total_act_lastday); ?>'} ],
  ]);


  var options = {
    width: screen.width, height: 200, greenFrom:20000, greenTo:40000, redFrom: 0, redTo:20000, minorTicks: 0, max:40000,min:0,majorTicks: ['0%', '', '', '', '100%'],
  };


  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', '#000000');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#000000');
        path.setAttribute('fill', '#000000');
      }
    });
  });

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

---

Note : circle.setAttribute is for change round ball color path.setAttribute is for change needle color